body{
background:#f5f7fb;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto;
color:#111;
}

#steer-app{
max-width:1400px;
margin:auto;
padding:40px 20px;
}

.question input {
    color: black!important;
}

/* PROGRESS */

.progress{
height:6px;
background:#e5e7eb;
border-radius:10px;
margin-bottom:30px;
overflow:hidden;
}

.progress-bar{
height:100%;
width:0%;
background:#2563eb;
transition:width .4s ease;
}

/* STEP */

.step{
display:none;
animation:fade .3s ease;
}

.step.active{
display:block;
}

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

.steer h2{
margin-bottom:5px;
color: black!important;
}

.step-subtitle{
color:#6b7280;
margin-bottom:25px;
}

/* QUESTIONS */

.question{
background:white;
padding:20px;
border-radius:14px;
margin-bottom:15px;
box-shadow:0 2px 8px rgba(0,0,0,0.05);
}

/* SCALE */

.scale{
display:flex;
gap:8px;
margin-top:10px;
}

.scale button{
flex:1;
padding:10px;
border-radius:10px;
border:1px solid #e5e7eb;
background:white;
cursor:pointer;
transition:all .2s;
}

.scale button:hover{
border-color:#2563eb;
}

.scale button.active {
    --cmsmasters-button-normal-colors-bg: #bd993f;
    --cmsmasters-button-normal-colors-bg-image: none;
    
    color: white;
    border-color: #bd993f;
}

.scale.error{
border:2px solid #ef4444;
border-radius:10px;
padding:5px;
}

.scale.error button{
border-color:#ef4444;
}

/* NAV */

.nav{
display:flex;
justify-content:space-between;
margin-top:20px;
}

button.next,
button.prev{
padding:12px 18px;
border:none;
border-radius:10px;
cursor:pointer;
font-weight:600;
}

button.next{
background:#2563eb;
color:white;
}

button.prev{
background:#e5e7eb;
}

/* RESULTS */

#scores p{
background:white;
padding:10px;
border-radius:8px;
margin-bottom:8px;
}


#bar-charts canvas {
    width: 100% !important;
    height: 100% !important;
}

.error {
    border: 2px solid #dc2626 !important;
    background: #fff5f5 !important;
}

.scale.error {
    border: 2px solid #dc2626 !important;
    border-radius: 10px;
    padding: 10px;
    background: #fff5f5 !important;
}

.steer-results-wrap{
    padding-left: 40px;
    padding-right: 40px;
}

.steer-results-card{
    width: 100%;
}

@media (max-width: 768px){
    .steer-results-wrap{
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .steer-results-card{
        padding: 22px !important;
    }
}