body{
font-family:'Inter',sans-serif;
background:#f1f5f9;
min-height:100vh;
}

.wrapper{
min-height:100vh;
display:flex;
}

.left-panel{
flex:1;
background:linear-gradient(135deg,#2563eb,#1e3a8a);
color:white;
display:flex;
align-items:center;
justify-content:center;
padding:60px;
}

.left-panel h1{
font-size:36px;
font-weight:700;
}

.left-panel p{
opacity:.9;
margin-top:15px;
}

.right-panel{
flex:1;
display:flex;
align-items:center;
justify-content:center;
background:#ffffff;
padding:40px;
}

.register-card{
width:100%;
max-width:520px;
}

.brand{
font-weight:700;
font-size:22px;
color:#2563eb;
margin-bottom:5px;
}

.subtitle{
font-size:14px;
color:#6b7280;
margin-bottom:30px;
}

.form-control{
height:52px;
border-radius:12px;
}

.form-control:focus{
border-color:#2563eb;
box-shadow:0 0 0 2px rgba(37,99,235,.15);
}

.btn-register{
height:52px;
border-radius:12px;
font-weight:600;
}

@media(max-width:992px){
.left-panel{
display:none;
}
}











/* STEP PROGRESS BAR */

.step-progress{
display:flex;
align-items:center;
justify-content:center;
margin-bottom:40px;
margin-left: -110px;
}

.step{
display:flex;
flex-direction:column;
align-items:center;
min-width:100px;
position:relative;
font-size:12px;
color:#94a3b8;
}

.circle{
width:38px;
height:38px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
border:2px solid #d1d5db;
background:#ffffff;
font-weight:600;
margin-bottom:6px;
z-index:2;
}

.label{
font-size:12px;
text-align:center;
white-space:nowrap;
}

.step:not(:last-child)::after{
content:"";
position:absolute;
top:19px;
left:50%;
width:100px;
height:3px;
background:#d1d5db;
z-index:0;
}

/* ACTIVE */

.step.active .circle{
background:#2563eb;
border-color:#2563eb;
color:#ffffff;
}

.step.active .label{
color:#2563eb;
font-weight:500;
}

/* COMPLETED */

.step.done .circle{
background:#16a34a;
border-color:#16a34a;
color:#ffffff;
}

.step.done .label{
color:#16a34a;
}

.step.done::after{
background:#16a34a;
}

.step.active::after{
background:#2563eb;
}











.status-card{
max-width:600px;
width:100%;
text-align:center;
}

.brand{
font-size:22px;
font-weight:700;
color:#2563eb;
margin-bottom:20px;
}

.status-icon{
width:80px;
height:80px;
background:#e0e7ff;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:34px;
color:#2563eb;
margin:0 auto 20px auto;
}

.status-title{
font-size:22px;
font-weight:600;
margin-bottom:10px;
}

.status-text{
color:#6b7280;
margin-bottom:30px;
}

.btn-dashboard{
height:48px;
border-radius:12px;
font-weight:600;
}

@media(max-width:992px){
.left-panel{
display:none;
}
}