/* ===== RESET ===== */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:'Inter',sans-serif;
background:#F8FAFC;
color:#0F172A;
display:flex;
justify-content:center;
min-height:100vh;
}


/* ===== APP WRAPPER ===== */

.app{
width:100%;
max-width:520px;
padding:20px;
}


/* ===== LOGO BAR ===== */

.logo-bar{
display:flex;
justify-content:center;
align-items:center;
margin-bottom:15px;
}

.logo{
height:90px;
object-fit:contain;
}


/* ===== HEADER ===== */

.header{
position:sticky;
top:0;
background:#F8FAFC;
padding-bottom:18px;
z-index:10;
}


/* BACK BUTTON */

.back-btn{
background:#FFFFFF;
border:1px solid #E2E8F0;
width:36px;
height:36px;
border-radius:10px;
font-size:18px;
cursor:pointer;
margin-bottom:12px;
display:flex;
align-items:center;
justify-content:center;
transition:.2s;
}

.back-btn:hover{
background:#EFF6FF;
border-color:#2563EB;
}


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

.progress-wrapper{
margin-top:5px;
}

.progress-info{
font-size:14px;
font-weight:600;
margin-bottom:6px;
color:#475569;
}

.progress-bar{
width:100%;
height:8px;
background:#E2E8F0;
border-radius:20px;
overflow:hidden;
}

#progressFill{
height:100%;
width:0%;
background:linear-gradient(90deg,#4F46E5,#6366F1);
transition:width .5s ease;
}


/* ===== QUIZ CONTAINER ===== */

.quiz-container{
margin-top:30px;
animation:fadeIn .4s ease;
}


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

.card{
background:#FFFFFF;
padding:32px;
border-radius:18px;

box-shadow:
0 10px 25px rgba(0,0,0,0.05),
0 4px 10px rgba(0,0,0,0.04);

transition:all .25s ease;
}


/* ===== QUESTION ===== */

.question-title{
font-family:'Inter',sans-serif;
font-weight:600;
font-size:22px;
margin-bottom:22px;
line-height:1.4;
}


/* ===== OPTIONS ===== */

.option{
border:1.5px solid #E2E8F0;
padding:16px 18px;
border-radius:12px;
margin-bottom:12px;
cursor:pointer;
font-weight:500;
transition:all .2s ease;
background:#FFFFFF;
}

.option:hover{
border-color:#4F46E5;
background:#EEF2FF;
}

.option:active{
transform:scale(.98);
}

.option.selected{
background:#4F46E5;
color:white;
border-color:#4F46E5;
}


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

.continue-btn{
margin-top:18px;
width:100%;
padding:15px;

background:#4F46E5;
color:white;

border:none;
border-radius:12px;

font-weight:600;
font-size:15px;

cursor:pointer;

transition:.2s;
}

.continue-btn:hover{
background:#4338CA;
}

.continue-btn:active{
transform:scale(.97);
}


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

input,select{
width:100%;
padding:13px;
border-radius:10px;
border:1.5px solid #E2E8F0;
margin-bottom:15px;
font-size:14px;
transition:.2s;
}

input:focus,select:focus{
outline:none;
border-color:#4F46E5;
box-shadow:0 0 0 3px rgba(79,70,229,0.08);
}


/* ===== RESUME UPLOAD BOX ===== */

.upload-box{
border:2px dashed #E2E8F0;
border-radius:12px;
padding:25px;
text-align:center;
margin-top:15px;
cursor:pointer;
transition:.2s;
background:#FFFFFF;
}

.upload-box:hover{
border-color:#4F46E5;
background:#F5F7FF;
}


/* ===== SALARY TABS ===== */

.tabs{
display:flex;
margin-bottom:15px;
gap:10px;
}

.tab{
flex:1;
text-align:center;
padding:10px;
cursor:pointer;
border:1px solid #E2E8F0;
border-radius:8px;
font-weight:500;
transition:.2s;
}

.tab.active{
background:#EEF2FF;
border-color:#4F46E5;
color:#4F46E5;
font-weight:600;
}


/* ===== RANGE SLIDER ===== */

input[type="range"]{
width:100%;
margin:10px 0 15px 0;
}


/* ===== LOADER ===== */

.loader-bar{
height:10px;
background:#E2E8F0;
border-radius:20px;
overflow:hidden;
margin:20px 0;
}

.loader-fill{
height:100%;
width:0%;
background:#22C55E;
transition:width .3s ease;
}

.checklist{
list-style:none;
font-size:14px;
color:#475569;
}

.checklist li{
margin-bottom:8px;
}


/* ===== SUCCESS PAGE ===== */

.success-number{
font-size:30px;
font-weight:700;
color:#22C55E;
margin-bottom:18px;
text-align:center;
}


/* ===== ANIMATIONS ===== */

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

@keyframes bounceIn{
0%{transform:scale(.9);opacity:0;}
50%{transform:scale(1.05);opacity:1;}
70%{transform:scale(.97);}
100%{transform:scale(1);}
}

.bounce{
animation:bounceIn .45s ease;
}


/* ===== MOBILE ===== */

@media(max-width:600px){

.app{
padding:16px;
}

.card{
padding:26px 22px;
}

.question-title{
font-size:20px;
}

.option{
font-size:15px;
}

}


/* ===== TABLET / DESKTOP ===== */

@media(min-width:768px){

.app{
max-width:720px;
}

.question-title{
font-size:24px;
}

}