body{
background:#f4f7fb;
}

.mqp-container{
max-width:700px;
margin:50px auto;
background:#fff;
padding:40px;
border-radius:24px;
box-shadow:0 15px 50px rgba(0,0,0,0.08);
font-family:Arial,sans-serif;
}

.mqp-question-box{
background:#fff;
padding:20px;
border:1px solid #ddd;
margin-bottom:20px;
border-radius:12px;
}

.mqp-progress{
height:10px;
background:#eee;
border-radius:20px;
overflow:hidden;
margin-bottom:30px;
}

.mqp-progress-bar{
height:100%;
background:linear-gradient(90deg,#7c3aed,#06b6d4);
}

.mqp-question-image{
width:100%;
border-radius:18px;
margin-bottom:20px;
}

.mqp-question-number{
color:#7c3aed;
font-weight:bold;
margin-bottom:10px;
}

.mqp-step h2{
font-size:32px;
margin-bottom:25px;
}

.mqp-options{
display:flex;
flex-direction:column;
gap:16px;
}

.mqp-option{
border:2px solid #eee;
padding:18px;
border-radius:18px;
cursor:pointer;
}

.mqp-option.active{
border-color:#7c3aed;
background:#f5f3ff;
}

.mqp-option input{
display:none;
}

.mqp-next-btn{
margin-top:30px;
background:linear-gradient(90deg,#7c3aed,#06b6d4);
border:none;
color:#fff;
padding:14px 30px;
border-radius:14px;
font-size:16px;
cursor:pointer;
}

.mqp-result{
text-align:center;
}

.mqp-score{
font-size:60px;
font-weight:bold;
margin-bottom:20px;
}

.mqp-share-buttons{
display:flex;
justify-content:center;
gap:15px;
flex-wrap:wrap;
}

.mqp-share-btn{
padding:14px 20px;
border-radius:12px;
color:#fff;
text-decoration:none;
font-weight:bold;
}

.whatsapp{
background:#25D366;
}

.facebook{
background:#1877F2;
}


.mqp-start-screen{
text-align:center;
padding:80px 20px;
}

.mqp-start-screen h1{
font-size:42px;
margin-bottom:30px;
}

.mqp-start-btn{
display:inline-block;
padding:18px 40px;
background:linear-gradient(90deg,#7c3aed,#06b6d4);
color:#fff;
text-decoration:none;
font-size:20px;
font-weight:bold;
border-radius:16px;
}


.mqp-start-screen{
text-align:center;
padding:100px 30px;
background:linear-gradient(135deg,#7c3aed,#06b6d4);
border-radius:28px;
color:#fff;
position:relative;
overflow:hidden;
}

.mqp-start-badge{
display:inline-block;
padding:10px 18px;
background:rgba(255,255,255,0.18);
border-radius:30px;
font-weight:bold;
margin-bottom:25px;
backdrop-filter:blur(10px);
}

.mqp-start-screen h1{
font-size:54px;
line-height:1.2;
margin-bottom:20px;
color:#fff;
}

.mqp-start-screen p{
font-size:18px;
max-width:560px;
margin:0 auto 35px;
opacity:0.95;
line-height:1.7;
}

.mqp-start-btn{
display:inline-block;
padding:18px 42px;
background:#fff;
color:#111;
text-decoration:none;
font-size:20px;
font-weight:bold;
border-radius:18px;
transition:0.3s ease;
box-shadow:0 12px 30px rgba(0,0,0,0.15);
}

.mqp-start-btn:hover{
transform:translateY(-3px) scale(1.02);
}

.mqp-result{
text-align:center;
padding:70px 25px;
background:linear-gradient(135deg,#111827,#1f2937);
border-radius:28px;
color:#fff;
}

.mqp-result-badge{
display:inline-block;
padding:10px 18px;
background:rgba(255,255,255,0.12);
border-radius:30px;
font-weight:bold;
margin-bottom:25px;
}

.mqp-result h2{
font-size:48px;
margin-bottom:20px;
color:#fff;
}

.mqp-score{
font-size:90px;
font-weight:900;
background:linear-gradient(90deg,#7c3aed,#06b6d4);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
margin-bottom:25px;
}

.mqp-result-text{
font-size:18px;
opacity:0.9;
margin-bottom:35px;
}

@media(max-width:768px){

.mqp-start-screen{
padding:70px 20px;
}

.mqp-start-screen h1{
font-size:36px;
}

.mqp-result h2{
font-size:34px;
}

.mqp-score{
font-size:62px;
}

}


.mqp-middle-ad{
margin-bottom:25px;
text-align:center;
padding:10px;
border-radius:18px;
overflow:hidden;
background:#fff;
box-shadow:0 8px 25px rgba(0,0,0,0.06);
}