#mcq-app{
max-width:1200px;
margin:0px auto;
padding:0px;
}

/* Weak, casual-copying deterrent only - text selection can still be
   disabled by anyone via DevTools in seconds, this just stops the
   average visitor from idly right-click-copying question text. Form
   fields are explicitly excluded so login/profile/comment boxes etc
   still work normally for typing and selecting their own input. */
#mcq-app{
-webkit-user-select:none;
-moz-user-select:none;
user-select:none;
}

#mcq-app input,
#mcq-app textarea,
#mcq-app select{
-webkit-user-select:text;
-moz-user-select:text;
user-select:text;
}

.mcq-access-gate{
background:#fff;
padding:50px 24px;
border-radius:12px;
text-align:center;
max-width:420px;
margin:30px auto;
box-shadow:0 2px 10px rgba(0,0,0,.06);
}

.mcq-access-gate-icon{
font-size:44px;
margin-bottom:12px;
}

.mcq-access-gate h2{
margin:0 0 8px;
font-size:20px;
color:#1e293b;
}

.mcq-access-gate p{
margin:0;
font-size:14px;
color:#64748b;
line-height:1.6;
}

.mcq-access-gate-btn{
display:inline-block;
margin-top:18px;
padding:10px 26px;
background:#2563eb;
color:#fff;
border-radius:8px;
font-weight:600;
font-size:14px;
text-decoration:none;
}

.mcq-access-gate-btn:hover{
background:#1d4ed8;
color:#fff;
}

.mcq-paid-note{
text-align:center;
margin-top:14px;
}

.mcq-paid-note p{
font-size:13px;
color:#64748b;
margin:0 0 10px;
}

.mcq-buy-plan-btn-inline{
padding:9px 24px;
background:#2563eb;
color:#fff;
border:none;
border-radius:8px;
font-weight:600;
font-size:13.5px;
cursor:pointer;
}

.mcq-locked-feature{
background:#fff;
padding:50px 24px;
border-radius:12px;
text-align:center;
max-width:420px;
margin:20px auto;
box-shadow:0 2px 10px rgba(0,0,0,.06);
}

.mcq-locked-feature-icon{
font-size:38px;
margin-bottom:10px;
}

.mcq-locked-feature h3{
margin:0 0 8px;
font-size:17px;
color:#1e293b;
}

.mcq-locked-feature p{
margin:0 0 16px;
font-size:13.5px;
color:#64748b;
line-height:1.6;
}

.mcq-locked-feature-btn{
padding:10px 26px;
background:#2563eb;
color:#fff;
border:none;
border-radius:8px;
font-weight:600;
font-size:14px;
cursor:pointer;
display:inline-block;
text-decoration:none;
}

.mcq-upgrade-modal-overlay{
position:fixed;
inset:0;
background:rgba(15,23,42,.55);
z-index:999999;
display:flex;
align-items:center;
justify-content:center;
padding:16px;
}

.mcq-upgrade-modal{
background:#fff;
border-radius:16px;
padding:28px 24px;
max-width:340px;
width:100%;
text-align:center;
}

.mcq-upgrade-modal-icon{
font-size:34px;
margin-bottom:8px;
}

.mcq-upgrade-modal h3{
margin:0 0 8px;
font-size:17px;
color:#1e293b;
}

.mcq-upgrade-modal p{
margin:0 0 20px;
font-size:13.5px;
color:#64748b;
line-height:1.6;
}

.mcq-upgrade-modal-actions{
display:flex;
gap:10px;
justify-content:center;
}

.mcq-upgrade-modal-actions button{
padding:9px 20px;
border-radius:8px;
font-weight:600;
font-size:13.5px;
cursor:pointer;
border:none;
}

#mcqUpgradeModalCancel{
background:#f1f5f9;
color:#475569;
}

#mcqUpgradeModalBuy{
background:#2563eb;
color:#fff;
}

[data-theme="dark"] .mcq-locked-feature,
[data-theme="dark"] .mcq-upgrade-modal{
background:#1e293b;
}

[data-theme="dark"] .mcq-locked-feature h3,
[data-theme="dark"] .mcq-upgrade-modal h3{
color:#f1f5f9;
}

[data-theme="dark"] #mcqUpgradeModalCancel{
background:#334155;
color:#e2e8f0;
}

.mcq-start-screen{
background:#fff;
padding:20px;
border-radius:12px;
margin:-2px -2px 2px;
box-shadow:0 2px 10px rgba(0,0,0,.08);
overflow:hidden;
}

.quiz-title{
background:#2563eb;
color:#ffffff;
border:none;
border-radius:0;
padding:22px 20px;
margin:-20px -20px 20px;
font-size:26px;
font-weight:700;
line-height:1.35;
text-align:center;
box-shadow:0 2px 8px rgba(0,0,0,.12);
}

.quiz-meta{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:14px;
margin-bottom:25px;
}

.quiz-meta div{
background:#fff;
padding:18px 12px;
border-radius:14px;
border:1px solid #e2e8f0;
box-shadow:0 1px 4px rgba(0,0,0,.04);
text-align:center;
display:flex;
flex-direction:column;
align-items:center;
gap:4px;
}

.mcq-startcard-icon{
font-size:22px;
line-height:1;
}

.mcq-startcard-label{
font-size:12.5px;
font-weight:600;
color:#64748b;
}

.mcq-startcard-value{
font-size:20px;
font-weight:700;
color:#1e293b;
}

.start-language-select{
margin:20px 0 25px;
text-align:center;
}

.start-language-select h3{
font-size:16px;
font-weight:700;
margin-bottom:12px;
color:#2563eb;
}

.lang-options{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:10px;
}

.lang-option-btn{
padding:10px 22px;
border-radius:10px;
border:2px solid #c6d4e6;
background:#fff;
color:#334155;
font-size:15px;
font-weight:600;
cursor:pointer;
transition:.2s;
}

.lang-option-btn.active{
border-color:#2563eb;
background:#2563eb;
color:#fff;
}

#startQuizBtn{
display:block;
margin:25px auto 0;
padding:16px 40px;
font-size:18px;
font-weight:600;
cursor:pointer;
border:none;
border-radius:10px;
background:#16a34a;
color:#fff;
box-shadow:0 2px 8px rgba(0,0,0,.15);
}

/* Sectional-timer on/off toggle on the Start Screen -- only
   injected (via JS) when the admin has Sectional enabled for this
   test. */
.mcq-sectional-toggle{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin:14px 0;
padding:12px 14px;
border:1px solid #e2e8f0;
border-radius:12px;
background:#f8fafc;
text-align:left;
}

.mcq-sectional-toggle-label span{
display:block;
font-size:13.5px;
font-weight:700;
color:#1e293b;
}

.mcq-sectional-toggle-label small{
display:block;
font-size:11.5px;
color:#64748b;
margin-top:2px;
}

.mcq-switch{
position:relative;
flex-shrink:0;
display:inline-block;
width:42px;
height:24px;
}

.mcq-switch input{
opacity:0;
width:0;
height:0;
}

.mcq-switch-slider{
position:absolute;
cursor:pointer;
inset:0;
background:#cbd5e1;
border-radius:24px;
transition:background .2s ease;
}

.mcq-switch-slider::before{
content:"";
position:absolute;
height:18px;
width:18px;
left:3px;
top:3px;
background:#fff;
border-radius:50%;
transition:transform .2s ease;
}

.mcq-switch input:checked + .mcq-switch-slider{
background:#2563eb;
}

.mcq-switch input:checked + .mcq-switch-slider::before{
transform:translateX(18px);
}

/* Floating icon button docked directly under the fullscreen toggle
   (top:14px + 38px height + 8px gap = 60px) -- see JS in
   ensureFloatingControls() which moves this element out of
   .mcq-start-screen (overflow:hidden there blocks floating out to
   the corner) and into #mcq-app directly, matching where the
   fullscreen button already lives. */
.mcq-save-test-btn{
position:absolute;
top:60px;
left:14px;
z-index:40;
width:38px;
height:38px;
box-sizing:border-box;
padding:0;
margin:0;
display:inline-flex;
align-items:center;
justify-content:center;
font-size:18px;
line-height:1;
cursor:pointer;
border:2px solid #c6d4e6;
border-radius:8px;
background:#fff;
color:#475569;
}

.mcq-save-test-btn.mcq-save-test-active{
background:#fffbeb;
border-color:#fde68a;
color:#b45309;
}

.mcq-quiz-active #saveTestBtn,
.mcq-result-view #saveTestBtn{
display:none !important;
}

.quiz-screen{
margin-top:0;
background:#fff;
padding:20px;
border-radius:12px;
width:100%;
box-sizing:border-box;
overflow:hidden;
}

.question-box{
margin-top:20px;
}

.options label{
display:block;
margin-bottom:15px;
padding:10px;
border:1px solid #ddd;
border-radius:8px;
cursor:pointer;
}

@media(max-width:768px){

.question-box h2{
    font-size:30px;
font-weight:700;
line-height:1.4;
color:#334155;
}

.quiz-header{
font-size:18px;
}

}

.quiz-layout{
    display:flex;
    gap:20px;
}

.question-area{
    flex:3;
}

.palette{
    border:1px solid #e5e7eb;
    padding:12px;
    border-radius:12px;
    background:#f8fafc;
    margin-top:15px;
    display:block;
margin:0 auto;
    height:fit-content;
    align-self:flex-start;
}

#questionPalette{
    display:grid;
    grid-template-columns:repeat(10,minmax(0,1fr));
    row-gap:10px;
    column-gap:4px;
    width:100%;
    justify-items:stretch;
}

.palette button{
    width:100%;
    aspect-ratio:1;
    max-width:34px;
    margin:0 auto;
    border:2px solid #cfd8dc;
    border-radius:4px;
    background:#fff;
    color:#222;
    font-size:11px;
    font-weight:600;
    cursor:pointer;
    position:relative;
    transition:.2s;
    padding:0;
}

.current-question{
    background:#2563eb;
    color:#fff;
    border:3px solid #000 !important;
}

@media(max-width:768px){

    .quiz-layout{
        flex-direction:column;
    }

    .palette{
        order:2;
    }

    #questionPalette{
        grid-template-columns:repeat(10,minmax(0,1fr));
    }
}

.action-buttons{
    margin-top:20px;
}

.action-buttons button{
    margin-right:10px;
    padding:10px 15px;
}

.not-visited{
background:#666;
color:#fff;
}

.not-answered{
background:#dc2626;
color:#fff;
}

.answered{
background:#16a34a;
color:#fff;
}

.review{
background:#f59e0b;
color:#fff;
}

.answered-review{
background:#8b5cf6;
color:#fff;
}

#questionPalette button{
width:22px;
height:22px;
margin:2px;
border:none;
border-radius:3px;
font-weight:600;
}

.current-question{
    border:3px solid #000 !important;
}

#clearBtn{
background:#dc2626;
color:#fff;
}

.action-buttons{
display:flex;
flex-wrap:wrap;
gap:12px;
margin-top:25px;
}

.action-buttons button{
border:none;
border-radius:10px;
padding:12px 20px;
font-size:16px;
font-weight:600;
cursor:pointer;
transition:.3s;
min-width:160px;
box-shadow:0 2px 8px rgba(0,0,0,.15);
}

#prevBtn{
background:#6b7280;
color:#fff;
}

#nextBtn{
background:#2563eb;
color:#fff;
}

#reviewBtn{
background:#f59e0b;
color:#fff;
}

#clearBtn{
background:#dc2626;
color:#fff;
}

#submitBtn{
background:#16a34a;
color:#fff;
}

.action-buttons button:hover{
transform:translateY(-2px);
}

@media(max-width:768px){

.action-buttons{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
}

.action-buttons button{
width:100%;
padding:12px;
font-size:15px;
}

/* Submit Button Full Width */
#submitBtn{
grid-column:1 / -1;
}

}

.result-card{
background:#fff;
padding:0;
border-radius:0;
margin-top:20px;
max-width:100%;
}

.result-card h2{
background:#2563eb;
color:#ffffff;
border:none;
border-radius:0;
padding:22px 20px;
margin:-40px -20px 20px;
font-size:24px;
font-weight:700;
line-height:1.35;
text-align:center;
box-shadow:0 2px 8px rgba(0,0,0,.12);
}

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

.result-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:14px;
}

.result-grid > div:not(.final-score-card){
padding:20px;
border-radius:14px;
text-align:center;
font-size:14px;
font-weight:600;
min-height:110px;
box-shadow:0 1px 4px rgba(0,0,0,.04);

display:flex;
flex-direction:column;
justify-content:center;
}

.result-grid strong{
display:block;
font-size:24px;
font-weight:700;
margin-top:8px;
}

@media(max-width:768px){

.result-grid{
grid-template-columns:repeat(2,1fr);
gap:12px;
}

.result-grid > div:not(.final-score-card){
min-height:100px;
padding:16px;
}

}

.not-attempted{
background:#fffbeb;
color:#b45309;
border:1px solid #fde68a;
border-radius:14px;
}

.correct-answers{
background:#f0fdf4;
color:#15803d;
border:1px solid #bbf7d0;
border-radius:14px;
}

.wrong-answers{
background:#fef2f2;
color:#b91c1c;
border:1px solid #fecaca;
border-radius:14px;
}

.blue-card{
background:#eff6ff;
color:#1d4ed8;
border:1px solid #bfdbfe;
border-radius:14px;
}

.negative-marks{
background:#fef2f2;
color:#b91c1c;
border:1px solid #fecaca;
border-radius:14px;
}

#retakeQuizBtn{
background:#16a34a;
    width:75%;
    color:#fff;
    border:none;
    border-radius:12px;
    padding:14px;
font-size:16px;
font-weight:700;
cursor:pointer;
box-shadow:0 2px 8px rgba(22,163,74,.25);
}
  
#reviewAnswersBtn{
background:#2563eb;
    width:75%;
    color:#fff;
    border:none;
    border-radius:12px;
    padding:14px;
font-size:16px;
font-weight:700;
cursor:pointer;
box-shadow:0 2px 8px rgba(37,99,235,.25);
}

.review-back-btn{
    background:#2563eb;
    color:#fff;
    border:none;
    padding:14px 30px;
    border-radius:12px;
    font-size:18px;
    font-weight:600;
    cursor:pointer;
}

.review-card,
.review-question{
    background:#fff !important;
    border:1px solid #e2e8f0 !important;
    border-radius:14px;
    padding:14px 20px;
    margin-bottom:16px;
    box-shadow:0 1px 6px rgba(0,0,0,.04);
}

.review-question h3{
    color:#ffffff;
    font-size:32px;
    margin-bottom:15px;
}

.review-question p{
    margin:15px 0;
}

.wrong-answer{
    color:#ef4444;
    font-weight:700;
}

.not-attempted-answer{
    color:#facc15;
    font-weight:700;
}

.explanation-box{
    background:#0f172a;
    border-left:4px solid #3b82f6;
    padding:15px;
    margin-top:15px;
    border-radius:8px;
    line-height:1.7;
}

.correct-badge{
background:#064e3b;
color:#22c55e;
padding:8px 12px;
border-radius:8px;
display:inline-block;
margin-bottom:15px;
font-weight:600;
}

.wrong-badge{
background:#450a0a;
color:#ef4444;
padding:8px 12px;
border-radius:8px;
display:inline-block;
margin-bottom:15px;
font-weight:600;
}

.not-attempted-badge{
background:#78350f;
color:#facc15;
padding:8px 12px;
border-radius:8px;
display:inline-block;
margin-bottom:15px;
font-weight:600;
}

.time-taken{
    color:#60a5fa;
    font-weight:600;
    margin:12px 0;
}

.quiz-top-bar{
display:flex;
justify-content:space-between;
align-items:center;
margin-top:10px;
margin-bottom:15px;
}

.timer-box{
background:#2563eb;
color:#ffffff;
padding:8px 14px;
border-radius:12px;
font-weight:700;
font-size:16px;
transition:background .3s;
}

.timer-box.timer-warning{
background:#f59e0b;
}

.timer-box.timer-critical{
background:#dc2626;
animation:timerBlink 1s infinite;
}

@keyframes timerBlink{
0%, 100%{ opacity:1; }
50%{ opacity:.55; }
}

#questionNumber{
font-size:16px;
font-weight:600;
}

.palette h4{
    font-size:15px;
    margin-bottom:10px;
    font-weight:600;
}

body{
background:#EDF2FF !important;
}

.action-buttons{
justify-content:center;
}

#questionPalette{
justify-items:stretch;
}

.option-card{
display:flex;
align-items:center;
gap:0;
padding:16px 18px;
margin:0;
border:none;
border-bottom:1px solid #e2e8f0;
border-radius:0;
background:#fff;
}

#optionsContainer{
border-top:1px solid #e2e8f0;
margin-top:4px;
}

.option-card:last-child{
border-bottom:none;
}

.option-divider{
width:1px;
align-self:stretch;
background:transparent;
margin:0 16px;
}

#optionsContainer{
position:relative;
}

#optionsContainer::before{
content:"";
position:absolute;
top:0;
bottom:0;
left:55px;
width:1px;
background:#e2e8f0;
}

.option-text{
flex:1;
pointer-events:none;
line-height:1.5;
}

.option-card input{
position:static;
opacity:1;
pointer-events:auto;
width:21px;
height:21px;
margin:0;
flex-shrink:0;
accent-color:#2563eb;
cursor:pointer;
}

.option-card:has(input:checked){
background:#EFF6FF;
}

.option-card:hover{
background:#f8fafc;
}

.submit-modal{
position:fixed;
inset:0;
background:rgba(15,23,42,.55);
display:flex;
align-items:center;
justify-content:center;
z-index:99999;
padding:20px;
}

.submit-modal-box{
background:#fff;
width:100%;
max-width:500px;
border-radius:18px;
padding:25px;
box-shadow:0 10px 40px rgba(0,0,0,.15);
}

.submit-modal-box h2{
margin:0 0 10px;
font-size:24px;
color:#1e293b;
}

.submit-stats{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
margin:20px 0;
}

.stat-card{
padding:14px;
border-radius:14px;
box-shadow:0 1px 4px rgba(0,0,0,.04);
}

.stat-card span{
display:block;
font-size:11.5px;
font-weight:700;
margin-bottom:6px;
letter-spacing:.2px;
}

.stat-card b{
font-size:26px;
font-weight:700;
}

.modal-answered{
background:#e8fff0;
border-radius:20px;
color:#fff;
}

.stat-card.notanswered{
background:#fef2f2;
color:#b91c1c;
border:1px solid #fecaca;
border-radius:14px;
}

.modal-review{
background:#fff7dd;
border-radius:16px;
color:#fff;
}

.stat-card.total{
background:#eff6ff;
color:#1d4ed8;
border:1px solid #bfdbfe;
border-radius:14px;
}

.submit-actions{
display:flex;
flex-direction:column;
gap:10px;
margin-top:0px;
align-items:center;
}

@media(max-width:768px){

.submit-modal-box{
max-width:95%;
}

.submit-stats{
grid-template-columns:1fr 1fr;
}

}

.result-buttons-box{
background:#fff;
margin-top:25px;
padding:20px;
border-radius:18px;
}

.review-screen h2{
text-align:center;
color:#3a4f66;
}

#questionText{
font-size:20px;
font-weight:700;
line-height:1.5;
color:#334155;
margin-bottom:20px;
}

.stat-card.answered{
background:#f0fdf4;
color:#15803d;
border:1px solid #bbf7d0;
border-radius:14px;
}

.stat-card.review{
background:#fffbeb;
color:#b45309;
border:1px solid #fde68a;
border-radius:14px;
}

.submit-warning{
margin:16px 0 4px;
padding:12px 14px;
border-radius:12px;
font-size:13.5px;
font-weight:600;
text-align:center;
background:#fffbeb;
color:#b45309;
border:1px solid #fde68a;
}

.submit-warning.success{
background:#f0fdf4;
color:#15803d;
border:1px solid #bbf7d0;
}

#keepWorkingBtn{
    margin-top:28px;
background:#fff;
    width:75%;
    color:#475569;
    border:1px solid #cbd5e1;
    border-radius:12px;
    padding:13px;
font-size:15px;
font-weight:700;
cursor:pointer;
}

#finalSubmitBtn{
background:#2563eb;
    width:75%;
    color:#fff;
    border:none;
    border-radius:12px;
    padding:13px;
font-size:15px;
font-weight:700;
cursor:pointer;
box-shadow:0 2px 8px rgba(37,99,235,.25);
}

.action-card{
display:flex;
flex-direction:column;
gap:10px;
margin-top:0px;
align-items:center;
}

.action-buttons-row{
display:flex;
gap:10px;
width:94%;
margin-top:32px;
align-items:stretch;
}

.action-buttons-row-secondary{
margin-top:0;
}

.mcq-download-pdf-btn{
width:94%;
padding:13px;
border-radius:12px;
border:1px solid #2563eb;
background:#fff;
color:#2563eb;
font-size:15px;
font-weight:700;
cursor:pointer;
}

.mcq-download-pdf-btn:disabled{
opacity:.6;
cursor:not-allowed;
}

.fs-resume-overlay{
position:fixed;
inset:0;
background:rgba(15,23,42,.75);
z-index:999999;
display:flex;
align-items:center;
justify-content:center;
padding:20px;
}

.fs-resume-box{
background:#fff;
border-radius:18px;
padding:32px 24px;
max-width:400px;
width:100%;
text-align:center;
box-shadow:0 10px 40px rgba(0,0,0,.25);
}

.fs-resume-icon{
font-size:44px;
margin-bottom:10px;
}

.fs-resume-box h2{
margin:0 0 10px;
font-size:21px;
color:#1e293b;
}

.fs-resume-box p{
font-size:14px;
color:#475569;
line-height:1.5;
margin:0 0 18px;
}

.fs-resume-box button{
width:100%;
border:none;
border-radius:12px;
padding:13px;
font-size:15px;
font-weight:700;
cursor:pointer;
margin-bottom:10px;
}

#mcqFullscreenResumeBtn{
background:#2563eb;
color:#fff;
}

#mcqFullscreenDismissBtn{
background:#f1f5f9;
color:#334155;
margin-bottom:0;
}

#confirmPauseBtn{
background:#f59e0b;
color:#fff;
}

#cancelPauseBtn{
background:#f1f5f9;
color:#334155;
margin-bottom:0;
}

#confirmNextPartBtn{
background:#f59e0b;
color:#fff;
}

#cancelNextPartBtn{
background:#f1f5f9;
color:#334155;
margin-bottom:0;
}

.action-buttons-row #retakeQuizBtn,
.action-buttons-row #relatedTestsBtn,
.action-buttons-row #shareResultBtn,
.action-buttons-row .mcq-download-pdf-btn{
width:100%;
white-space:nowrap;
padding:13px 6px;
font-size:14px;
overflow:hidden;
text-overflow:ellipsis;
margin-top:0;
box-sizing:border-box;
text-align:center;
text-decoration:none;
display:inline-flex;
align-items:center;
justify-content:center;
}

.action-buttons-row .mcq-download-pdf-btn{
font-size:12.5px;
padding:13px 4px;
gap:4px;
}

#relatedTestsBtn{
background:#2563eb;
color:#fff;
border:none;
border-radius:12px;
padding:13px;
font-size:15px;
font-weight:700;
cursor:pointer;
box-shadow:0 2px 8px rgba(37,99,235,.25);
}

#shareResultBtn{
background:#fff;
color:#2563eb;
border:1px solid #2563eb;
border-radius:12px;
padding:13px;
font-size:15px;
font-weight:700;
cursor:pointer;
display:inline-flex;
align-items:center;
justify-content:center;
gap:6px;
}

.promo-link{
margin-top:6px;
padding:12px 16px;
width:75%;
box-sizing:border-box;
background:#f8fafc;
border:1px solid #e2e8f0;
border-radius:12px;
font-size:12.5px;
color:#475569;
text-align:center;
line-height:1.5;
}

.promo-link a{
color:#2563eb;
font-weight:700;
text-decoration:none;
}

.promo-link a:hover{
text-decoration:underline;
}

.share-options-list{
display:flex;
flex-direction:column;
gap:10px;
margin:18px 0;
}

.share-option-btn{
display:flex;
align-items:center;
justify-content:center;
gap:8px;
padding:13px;
border-radius:12px;
font-size:15px;
font-weight:700;
text-decoration:none;
border:1px solid #e2e8f0;
}

.share-whatsapp{
background:#f0fdf4;
color:#15803d;
}

.share-facebook{
background:#eff6ff;
color:#1d4ed8;
}

.share-telegram{
background:#eff6ff;
color:#0284c7;
}

.review-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:0;
padding:2px 0;
cursor:pointer;
}

.review-title{
flex:1;
}

.review-title h3{
margin:0;
font-size:16.5px;
font-weight:700;
color:#1e293b;
}

.review-result{
font-size:0;
display:flex;
align-items:center;
}

.review-summary{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:8px;
margin-bottom:20px;
}

.summary-box{
padding:12px;
border-radius:12px;
text-align:center;
font-size:12px;
font-weight:600;
}

.summary-box strong{
display:block;
font-size:20px;
margin-top:5px;
}

.summary-all{
background:#dbeafe;
color:#1d4ed8;
font-size:22px;
font-weight:600;
}

.summary-correct{
background:#dcfce7;
color:#16a34a;
font-size:22px;
font-weight:600;
}

.summary-wrong{
background:#fee2e2;
color:#dc2626;
font-size:22px;
font-weight:600;
}

.summary-na{
    background:#fff8dc;
    color:#f59e0b;
    font-size:22px;
font-weight:600;
}

@media (max-width: 768px) {

.summary-box strong{
font-size:20px;
}

.summary-all{
font-size:12px;
font-weight:600;
}

.summary-correct{
font-size:12px;
font-weight:600;
}

.summary-wrong{
font-size:12px;
font-weight:600;
}

.summary-na{
font-size:12px;
font-weight:600;
}

}

.summary-box{
height:90px;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
border-radius:14px;
font-weight:700;
}

.summary-box strong{
font-size:28px;
margin-top:6px;
}

.review-nav-btn{
width:100%;
aspect-ratio:1;
max-width:34px;
margin:0 auto;
border:none;
border-radius:8px;
font-size:14px;
font-weight:700;
cursor:pointer;
position:relative;
color:#fff;
transition:.2s;
padding:0;
}

.nav-correct{
background:#16a34a !important;
color:#fff !important;
}

.nav-wrong{
background:#dc2626 !important;
color:#fff !important;
}

.nav-not-attempted{
background:#f59e0b !important;
color:#fff !important;
}

@media (max-width:768px){

.review-nav{
grid-template-columns:repeat(10,minmax(0,1fr)) !important;
}

.review-nav-btn{
    width:24px;
    height:24px;
    font-size:10px;
    margin:0;
}

}

.review-nav{
display:grid;
grid-template-columns:repeat(15,minmax(0,1fr));
row-gap:12px;
column-gap:6px;
justify-items:stretch;
background:#f8fafc;
border:1px solid #e2e8f0;
border-radius:14px !important;
padding:15px;
margin-bottom:20px;
overflow:hidden;
}

.review-card{
display:block !important;
width:100% !important;
}

.review-content{
display:none;
margin-top:15px;
}

.review-card:first-of-type .review-content{
display:block;
}

.review-meta{

display:flex;
align-items:center;
gap:8px;

margin-top:6px;

flex-wrap:wrap;

}

.review-time{

font-weight:700;
font-size:11px;
color:#1d4ed8;
background:#eff6ff;
display:inline-flex;
align-items:center;
gap:4px;
padding:3px 9px;
border-radius:20px;

}

.review-community-stats{

display:flex;
align-items:center;
gap:8px;
margin-bottom:12px;
flex-wrap:wrap;

}

.review-avg-time{

font-weight:600;
font-size:10.5px;
color:#9333ea;
background:#faf5ff;
border:1px solid #e9d5ff;
display:inline-flex;
align-items:center;
gap:4px;
padding:2px 8px;
border-radius:20px;

}

.review-correct-pct{

font-weight:600;
font-size:10.5px;
color:#15803d;
background:#f0fdf4;
border:1px solid #bbf7d0;
display:inline-flex;
align-items:center;
gap:4px;
padding:2px 8px;
border-radius:20px;

}

.num-correct,
.num-wrong,
.num-not-attempted{

width:44px;
height:44px;

border-radius:50%;

display:flex;
align-items:center;
justify-content:center;

font-size:22px;
font-weight:700;

flex-shrink:0;

}

.num-correct{
background:#dcfce7;
color:#16a34a;
}

.num-wrong{
background:#fee2e2;
color:#dc2626;
}

.num-not-attempted{
background:#f3f4f6;
color:#6b7280;
}

.status-icon{

width:24px;
height:24px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:12px;
font-weight:700;

}

.status-correct{
background:#dcfce7;
color:#16a34a;
border:none;
}

.status-wrong{
background:#fee2e2;
color:#dc2626;
border:none;
}

.status-na{
background:#f1f5f9;
color:#64748b;
border:none;
}

.review-title{

flex:1;

}

.review-marks{

font-weight:700;
font-size:11px;
padding:3px 9px;
border-radius:20px;

white-space:nowrap;

}

.mark-correct{

color:#15803d;
background:#f0fdf4;

}

.mark-wrong{

color:#b91c1c;
background:#fef2f2;

}

.mark-na{

color:#64748b;
background:#f1f5f9;

}

.review-label{
font-size:20px;
font-weight:700;
color:#222;
margin-bottom:12px;
}

.review-question-text{
font-size:19px;
font-weight:700;
line-height:1.7;
margin-bottom:20px;
color:#333;
}

.review-options{
display:flex;
flex-direction:column;
gap:14px;
}

.review-answer-option{
display:flex;
align-items:center;
gap:16px;
padding:14px 16px;
border:2px solid #e8e8e8;
border-radius:12px;
background:#fff;
position:relative;
transition:.3s;
min-height:68px;
}

.review-option-letter{
width:30px;
height:30px;
border-radius:50%;
border:2px solid #e5e5e5;
display:flex;
align-items:center;
justify-content:center;
font-size:16px;
font-weight:700;
background:#fafafa;
flex-shrink:0;
}

.review-option-text{
flex:1;
font-size:18px;
line-height:1.5;
font-weight:500;
color:#222;
}

.review-answer-correct{
border-color:#25b34b;
background:#f4fff6;
}

.review-answer-user{
border-color:#dc2626;
background:#fff8f8;
}

.review-option-badge{
padding:8px 12px;
border-radius:8px;
font-size:12px;
font-weight:700;
}

.review-badge-correct,
.badge-correct{
background:#dff9df;
color:#0b9c45;
padding:10px 10px;
border-radius:14px;
font-size:12px;
font-weight:600;
display:inline-flex;
align-items:center;
justify-content:center;
}

.review-badge-user,
.badge-user{
background:#ffe4e4;
color:#d62828;
padding:10px 10px;
border-radius:14px;
font-size:12px;
font-weight:600;
display:inline-flex;
align-items:center;
justify-content:center;
}

.review-explanation{

margin-top:20px;

background:#eff6ff;

border:1px solid #bfdbfe;

border-radius:12px;

padding:16px 18px;

}

.review-exp-title{

font-size:18px;

font-weight:700;

color:#1d4ed8;

margin-bottom:10px;

}

.review-exp-text{

font-size:16px;

line-height:1.7;

color:#374151;

}

.submit-time-left{
text-align:center;
font-size:16px;
font-weight:700;
color:#1d4ed8;
margin:18px 0 12px;
padding:10px 14px;
background:#eff6ff;
border:1px solid #bfdbfe;
border-radius:10px;
}

.performance-excellent,
.performance-verygood,
.performance-good,
.performance-average,
.performance-poor{

margin:18px 0;
padding:14px;
border-radius:12px;
text-align:center;
font-size:17px;
font-weight:700;

}

.performance-excellent{
background:#e8f8ec;
color:#138a36;
}

.performance-verygood{
background:#edf8ff;
color:#1565c0;
}

.performance-good{
background:#fff8e6;
color:#c67c00;
}

.performance-average{
background:#fff4e5;
color:#f59e0b;
}

.performance-poor{
background:#fdecec;
color:#c62828;
}

.progress-wrapper{
display:flex;
align-items:center;
gap:10px;
}

.progress-bar{
flex:1;
height:8px;
background:#dbeafe;
border-radius:20px;
overflow:hidden;
}

#progressFill{
width:0%;
height:100%;
background:#2563eb;
border-radius:20px;
transition:width .3s ease;
}

#progressText{
font-size:13px;
font-weight:600;
min-width:42px;
text-align:right;
color:#2563eb;
}

.quiz-top-bar{
display:flex;
flex-direction:column;
gap:12px;
}

.top-row{
display:flex;
align-items:center;
justify-content:space-between;
width:100%;
flex-wrap:nowrap;
gap:8px;
}

#questionNumber{
font-size:18px;
font-weight:700;
margin:0;
min-width:0;
flex-shrink:1;
}

.top-right-controls{
display:flex;
align-items:center;
gap:6px;
flex-wrap:nowrap;
justify-content:flex-end;
flex-shrink:0;
}

.timer-box{
flex-shrink:0;
margin-left:0;
}

.pause-test-trigger-btn:disabled,
.pause-test-trigger-btn.pause-btn-used{
opacity:.45;
cursor:not-allowed;
background:#f1f5f9;
color:#94a3b8;
border-color:#e2e8f0;
}

.pause-test-btn-hamburger{
display:none;
}

.pause-test-btn-zoom{
height:38px;
padding:0 12px;
border-radius:8px;
border:1px solid #bfdbfe;
background:#fff;
color:#2563eb;
font-size:12px;
font-weight:700;
cursor:pointer;
white-space:nowrap;
display:none;
}

.pause-test-btn-zoom:hover{
background:#eff6ff;
}

.mcq-theme-toggle-btn{
height:38px;
width:38px;
padding:0;
border-radius:8px;
border:1px solid #bfdbfe;
background:#fff;
color:#2563eb;
font-size:16px;
cursor:pointer;
display:none;
align-items:center;
justify-content:center;
}

.mcq-theme-toggle-btn:hover{
background:#eff6ff;
}

@media(max-width:900px){

    .mcq-fullscreen .pause-test-btn-hamburger{
        display:block;
        width:100%;
        max-width:none;
        aspect-ratio:auto;
        text-align:center;
        margin:0 0 14px;
        padding:10px;
        border-radius:10px;
        border:1px solid #bfdbfe;
        background:#eff6ff;
        color:#1d4ed8;
        font-size:14px;
        font-weight:700;
        cursor:pointer;
    }

}

.pause-overlay{
position:fixed;
inset:0;
background:rgba(15,23,42,.75);
z-index:999999;
display:flex;
align-items:center;
justify-content:center;
padding:20px;
}

.pause-overlay-box{
background:#fff;
border-radius:18px;
padding:32px 24px;
max-width:400px;
width:100%;
text-align:center;
box-shadow:0 10px 40px rgba(0,0,0,.25);
}

.pause-overlay-icon{
font-size:48px;
margin-bottom:10px;
}

.pause-overlay-box h2{
margin:0 0 12px;
font-size:22px;
color:#1e293b;
}

.pause-overlay-box p{
font-size:14px;
color:#475569;
line-height:1.6;
margin:0 0 12px;
}

.pause-overlay-note{
background:#fffbeb;
color:#b45309;
border:1px solid #fde68a;
border-radius:10px;
padding:10px 12px;
font-size:12.5px !important;
}

#resumeTestBtn{
margin-top:10px;
background:#2563eb;
color:#fff;
border:none;
border-radius:12px;
padding:14px 24px;
font-size:16px;
font-weight:700;
cursor:pointer;
width:100%;
}

/* ===========================================================
   Test rating/review feature
=========================================================== */

.mcq-rating-badge{
display:flex;
align-items:center;
gap:6px;
margin:6px 0 12px auto;
padding:6px 12px;
background:#eff6ff;
border:1px solid #dbeafe;
border-radius:20px;
cursor:pointer;
font-size:13px;
width:fit-content;
}

.mcq-rating-badge:hover{
background:#dbeafe;
}

.mcq-rating-badge-text{
color:#1e293b;
font-weight:600;
}

.mcq-stars-row{
display:inline-flex;
gap:1px;
font-size:15px;
line-height:1;
}

.mcq-star-filled{
color:#f59e0b;
}

.mcq-star-empty{
color:#cbd5e1;
}

.mcq-rating-overlay{
position:fixed;
inset:0;
background:rgba(15,23,42,.75);
z-index:999999;
display:flex;
align-items:center;
justify-content:center;
padding:20px;
}

.mcq-rating-box{
position:relative;
background:#fff;
border-radius:18px;
padding:32px 24px 24px;
max-width:420px;
width:100%;
text-align:center;
box-shadow:0 10px 40px rgba(0,0,0,.25);
max-height:85vh;
overflow-y:auto;
}

.mcq-rating-close{
position:absolute;
top:12px;
right:12px;
width:32px;
height:32px;
border:none;
background:#f1f5f9;
color:#64748b;
border-radius:50%;
font-size:20px;
line-height:1;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
}

.mcq-rating-close:hover{
background:#e2e8f0;
color:#1e293b;
}

.mcq-rating-box h2{
margin:0 0 8px;
font-size:20px;
color:#1e293b;
}

.mcq-rating-box p{
font-size:14px;
color:#475569;
margin:0 0 16px;
}

.mcq-rating-stars-input{
display:flex;
justify-content:center;
gap:8px;
margin-bottom:16px;
}

.mcq-rating-star-btn{
font-size:36px;
color:#cbd5e1;
cursor:pointer;
transition:color .15s ease;
}

.mcq-rating-star-btn.active{
color:#f59e0b;
}

#mcqRatingComment{
width:100%;
box-sizing:border-box;
border:1px solid #e2e8f0;
border-radius:12px;
padding:10px 12px;
font-size:14px;
font-family:inherit;
resize:vertical;
margin-bottom:12px;
}

.mcq-rating-message{
font-size:13px;
color:#dc2626;
min-height:18px;
margin-bottom:8px;
}

.mcq-rating-message-success{
color:#16a34a;
}

.mcq-rating-submit-btn{
background:#2563eb;
color:#fff;
border:none;
border-radius:12px;
padding:14px 24px;
font-size:15px;
font-weight:700;
cursor:pointer;
width:100%;
}

.mcq-rating-submit-btn:disabled{
background:#93c5fd;
cursor:not-allowed;
}

.mcq-reviews-box{
max-width:480px;
text-align:left;
}

.mcq-reviews-box h2{
text-align:center;
}

.mcq-reviews-summary{
display:flex;
align-items:center;
justify-content:center;
gap:8px;
padding:12px;
background:#f8fafc;
border-radius:12px;
margin-bottom:16px;
font-size:14px;
color:#64748b;
text-align:center;
}

.mcq-reviews-list{
display:flex;
flex-direction:column;
gap:12px;
}

.mcq-reviews-empty{
text-align:center;
color:#94a3b8;
font-size:14px;
}

.mcq-review-card{
border:1px solid #e2e8f0;
border-radius:12px;
padding:12px 14px;
background:#f8fafc;
}

.mcq-review-card-top{
display:flex;
align-items:center;
gap:8px;
flex-wrap:wrap;
margin-bottom:6px;
}

.mcq-review-name{
font-weight:600;
color:#1e293b;
font-size:13px;
}

.mcq-review-date{
color:#94a3b8;
font-size:12px;
margin-left:auto;
}

.mcq-review-comment{
margin:0;
font-size:13.5px;
color:#334155;
line-height:1.5;
}

[data-theme="dark"] .mcq-rating-badge{
background:#1e293b;
border-color:#334155;
}

[data-theme="dark"] .mcq-rating-badge-text{
color:#e2e8f0;
}

[data-theme="dark"] .mcq-rating-box{
background:#1e293b;
}

[data-theme="dark"] .mcq-rating-box h2,
[data-theme="dark"] .mcq-review-name{
color:#f1f5f9;
}

[data-theme="dark"] .mcq-rating-box p,
[data-theme="dark"] .mcq-review-comment{
color:#cbd5e1;
}

[data-theme="dark"] .mcq-review-card,
[data-theme="dark"] .mcq-reviews-summary{
background:#0f172a;
border-color:#334155;
}

[data-theme="dark"] #mcqRatingComment{
background:#0f172a;
border-color:#334155;
color:#e2e8f0;
}

[data-theme="dark"] .mcq-rating-close{
background:#334155;
color:#cbd5e1;
}

/* ===========================================================
   Live Test badge + button states
=========================================================== */

.mcq-live-badge{
display:inline-flex;
align-items:center;
gap:6px;
background:#dc2626;
color:#fff;
font-size:11px;
font-weight:700;
letter-spacing:.03em;
padding:4px 10px;
border-radius:20px;
margin-bottom:8px;
}

.mcq-live-dot{
width:7px;
height:7px;
border-radius:50%;
background:#fff;
animation:mcqLiveDotPulse 1.4s infinite ease-in-out;
}

@keyframes mcqLiveDotPulse{
0%, 100%{ opacity:1; }
50%{ opacity:.35; }
}

#startQuizBtn:disabled{
background:#94a3b8 !important;
cursor:not-allowed;
opacity:.85;
}

.mcq-live-wait-screen{
max-width:420px;
margin:60px auto;
text-align:center;
padding:0 20px;
}

.mcq-live-wait-icon{
font-size:52px;
margin-bottom:12px;
}

.mcq-live-wait-screen h2{
font-size:22px;
color:#1e293b;
margin:0 0 8px;
}

.mcq-live-wait-screen p{
font-size:14px;
color:#64748b;
margin:0 0 20px;
}

.mcq-live-wait-card{
background:#eff6ff;
border:1px solid #dbeafe;
border-radius:14px;
padding:18px;
margin-bottom:24px;
display:flex;
flex-direction:column;
gap:6px;
}

.mcq-live-wait-card span{
font-size:13px;
color:#475569;
}

.mcq-live-wait-card strong{
font-size:17px;
color:#1e293b;
}

.mcq-live-wait-share-btn{
background:#25d366;
color:#fff;
border:none;
border-radius:12px;
padding:14px 24px;
font-size:15px;
font-weight:700;
cursor:pointer;
width:100%;
}

[data-theme="dark"] .mcq-live-wait-screen h2{
color:#f1f5f9;
}

[data-theme="dark"] .mcq-live-wait-screen p{
color:#94a3b8;
}

[data-theme="dark"] .mcq-live-wait-card{
background:#1e293b;
border-color:#334155;
}

[data-theme="dark"] .mcq-live-wait-card span{
color:#cbd5e1;
}

[data-theme="dark"] .mcq-live-wait-card strong{
color:#f1f5f9;
}

/* ===========================================================
   Section Summary popup (Submit Section)
=========================================================== */

.mcq-section-summary-overlay{
position:fixed;
inset:0;
background:rgba(15,23,42,.75);
z-index:999999;
display:flex;
align-items:center;
justify-content:center;
padding:20px;
}

.mcq-section-summary-box{
background:#fff;
border-radius:18px;
padding:28px 24px;
max-width:400px;
width:100%;
box-shadow:0 10px 40px rgba(0,0,0,.25);
}

.mcq-section-summary-box h2{
margin:0 0 16px;
font-size:19px;
color:#1e293b;
text-align:center;
}

.mcq-section-summary-row{
display:flex;
justify-content:space-between;
align-items:center;
padding:10px 4px;
border-bottom:1px solid #eff2f6;
font-size:14px;
color:#475569;
}

.mcq-section-summary-row:last-of-type{
border-bottom:none;
}

.mcq-section-summary-value{
font-weight:700;
color:#1e293b;
font-size:15px;
}

.mcq-section-summary-question{
margin:16px 0;
font-size:13.5px;
color:#475569;
text-align:center;
line-height:1.5;
}

.mcq-section-summary-btns{
display:flex;
gap:10px;
}

.mcq-section-summary-yes{
flex:1;
background:#2563eb;
color:#fff;
border:none;
border-radius:12px;
padding:13px;
font-size:14px;
font-weight:700;
cursor:pointer;
}

.mcq-section-summary-no{
flex:1;
background:#f1f5f9;
color:#334155;
border:none;
border-radius:12px;
padding:13px;
font-size:14px;
font-weight:700;
cursor:pointer;
}

[data-theme="dark"] .mcq-section-summary-box{
background:#1e293b;
}

[data-theme="dark"] .mcq-section-summary-box h2{
color:#f1f5f9;
}

[data-theme="dark"] .mcq-section-summary-row{
color:#cbd5e1;
border-color:#334155;
}

[data-theme="dark"] .mcq-section-summary-value{
color:#f1f5f9;
}

[data-theme="dark"] .mcq-section-summary-question{
color:#cbd5e1;
}

[data-theme="dark"] .mcq-section-summary-no{
background:#334155;
color:#e2e8f0;
}

.progress-wrapper{
display:flex;
align-items:center;
gap:12px;
width:100%;
}

.progress-bar{
flex:1;
height:8px;
background:#dbeafe;
border-radius:20px;
overflow:hidden;
}

#progressFill{
height:100%;
width:0%;
background:#2563eb;
border-radius:20px;
transition:width .3s ease;
}

#progressText{
min-width:42px;
font-size:14px;
font-weight:700;
color:#2563eb;
text-align:right;
}

.score-summary{
display:flex;
flex-direction:column;
align-items:center;
gap:12px;
margin-bottom:15px;
margin-top:15px ;
}

.score-summary-top{
display:flex;
align-items:center;
justify-content:center;
gap:20px;
width:100%;
flex-wrap:wrap;
}

.score-summary-bottom{
display:flex;
align-items:center;
justify-content:center;
gap:12px;
flex-wrap:wrap;
}

/* Sectional (2+ part) result: circle + part-bars stay side-by-side
   in one row at ANY screen width, including mobile -- matching the
   reference layout (circle left, per-part bars right) instead of
   the default centered/wrapping behaviour used for a plain single-
   colour result. */
.score-summary-sectional .score-summary-top{
flex-wrap:nowrap;
justify-content:flex-start;
gap:16px;
}

.score-summary-sectional .score-circle{
flex-shrink:0;
}

.score-summary-sectional .score-summary-bottom{
width:100%;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
gap:6px;
}

.score-circle{
position:relative;
width:140px;
height:140px;
}

.score-circle svg{
width:140px;
height:140px;
transform:rotate(-90deg);
}

.score-bg{
fill:none;
stroke:#e5e7eb;
stroke-width:10;
}

.score-progress{
fill:none;
stroke:#2563eb;
stroke-width:10;
stroke-linecap:round;
stroke-dasharray:327;
stroke-dashoffset:327;
transition:stroke-dashoffset .8s ease;
}

.score-text{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
font-size:28px;
font-weight:700;
color:#2563eb;
}

/* Multi-part score list (below/beside the multi-colour ring,
   only rendered for 2+ part tests) -- one row per part with a
   coloured horizontal bar, matching that part's ring-segment
   colour. */
.part-score-list{
flex:1 1 0;
min-width:0;
display:flex;
flex-direction:column;
justify-content:center;
gap:8px;
}

.part-score-row{
display:flex;
align-items:center;
gap:8px;
}

.part-score-name{
flex:0 0 82px;
width:82px;
font-size:10.5px;
line-height:1.2;
font-weight:700;
color:#1e293b;
white-space:normal;
overflow:visible;
text-overflow:clip;
word-break:break-word;
}

.part-score-bar-track{
flex:1 1 auto;
position:relative;
height:6px;
border-radius:6px;
background:#e2e8f0;
overflow:hidden;
}

.part-score-bar-fill{
position:absolute;
top:0;
left:0;
height:100%;
border-radius:6px;
transition:width .8s ease;
}

.part-score-value{
flex:0 0 auto;
min-width:16px;
font-size:11px;
font-weight:700;
color:#64748b;
text-align:right;
}

.performance-message{
text-align:left;
}

.performance-message b{
display:block;
font-size:16px;
line-height:1.4;
margin-bottom:8px;
color:#0f172a;
}

.cutoff-badge{
display:none;
margin:10px 0 4px;
padding:6px 16px;
border-radius:20px;
font-size:14px;
font-weight:700;
text-align:center;
}

.cutoff-badge-pass{
background:#f0fdf4;
color:#15803d;
border:1px solid #bbf7d0;
}

.cutoff-badge-fail{
background:#fef2f2;
color:#b91c1c;
border:1px solid #fecaca;
}

.cutoff-info{
font-size:13px;
color:#64748b;
font-weight:600;
margin-top:2px;
text-align:center;
}

.final-score-text{
font-size:16px;
color:#475569;
}

@media(max-width:768px){

.score-summary{
flex-direction:column;
gap:15px;
}

.performance-message{
text-align:center;
}

}

/* RESULT TABS */

.result-tabs{
display:flex;
gap:10px;
overflow-x:auto;
padding-bottom:8px;
scrollbar-width:none;
}

.result-tabs::-webkit-scrollbar{
display:none;
}

.result-tab{
flex:0 0 auto;
padding:12px 20px;
border:none;
border-radius:10px;
background:#edf2ff;
color:#1d4ed8;
font-size:15px;
font-weight:700;
cursor:pointer;
white-space:nowrap;
width:max-content;
min-width:max-content;
}

.result-tab:hover{
background:#dbeafe;
}

.result-tab.active{
background:#2563eb;
color:#fff;
}

.result-section{
display:none;
animation:fadeResult .25s ease;
}

.result-section.active{
display:block;
}

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

.subject-card{
background:#fff;
border:1px solid #e2e8f0;
border-radius:14px;
margin:14px 0;
overflow:hidden;
box-shadow:0 1px 6px rgba(0,0,0,.05);
}

.subject-body{
display:none;
padding:18px;
border-top:1px solid #eee;
}

.subject-card.active .subject-body{
display:block;
}

.subject-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:15px;
}

.subject-item{
text-align:center;
padding:16px;
border:1px solid #eee;
border-radius:12px;
background:#fafcff;
}

.subject-item span{
display:block;
font-size:14px;
color:#666;
margin-bottom:6px;
}

.subject-item strong{
font-size:22px;
color:#111;
}

@media(max-width:768px){

.subject-grid{
grid-template-columns:repeat(2,1fr);
}

}

.subject-header{
display:flex;
justify-content:space-between;
align-items:center;
gap:15px;
padding:18px;
cursor:pointer;
}

.subject-title{
font-size:18px;
font-weight:700;
color:#1e293b;
line-height:1.35;
flex:1;
word-break:break-word;
}

.subject-badge{
display:inline-flex;
align-items:center;
justify-content:center;
width:98px;
min-height:22px;
padding:3px 4px;
background:#eef4ff;
border-radius:11px;
font-size:9.5px;
font-weight:700;
white-space:nowrap;
color:#2563eb;
text-align:center;
}

.arrow{
width:9px;
height:9px;
border-right:2px solid #64748b;
border-bottom:2px solid #64748b;
transform:rotate(45deg);
transition:.25s;
flex-shrink:0;
border-radius:1px;
}

#questionImage{
display:none;
margin:18px 0 22px;
text-align:center;
}

#questionImage img{
display:inline-block;
max-width:100%;
height:auto;
margin:0 auto;
border:1px solid #dbe4f0;
border-radius:0px;
background:#fff;
cursor:pointer;
box-shadow:0 2px 8px rgba(0,0,0,.08);
transition:.25s;
}

/* Shared size presets for both question images and option
   images -- always paired with width/height:auto so the browser
   scales proportionally within the box rather than stretching,
   and max-width is always capped at 100% of the container so no
   preset (even "large"/"full") can ever overflow a narrow screen
   and break the layout. */
.mcq-img-small{
max-width:min(100px,100%);
max-height:100px;
width:auto;
height:auto;
}

.mcq-img-medium{
max-width:min(250px,100%);
max-height:200px;
width:auto;
height:auto;
}

.mcq-img-large{
max-width:min(450px,100%);
max-height:350px;
width:auto;
height:auto;
}

.mcq-img-full{
max-width:100%;
max-height:400px;
width:auto;
height:auto;
}

#questionImage img:hover{
transform:scale(1.01);
box-shadow:0 6px 18px rgba(0,0,0,.12);
}

@media(max-width:768px){

#questionImage{
margin:15px 0 18px;
}

#questionImage img{
border-radius:0px;
}

}

.option-content{
display:flex;
flex-direction:column;
align-items:center;
gap:10px;
width:100%;
}

.option-text{
display:block;
width:100%;
}

.option-image{
display:block;
width:auto;
height:auto;
margin:0 auto;
transition:.2s;
}

/* Square Image */
.option-image.square{
max-width:80px;
max-height:80px;
}

/* Landscape Image */
.option-image.landscape{
max-width:250px;
max-height:150px;
}

/* Portrait Image */
.option-image.portrait{
max-width:140px;
max-height:220px;
}

#imageViewer{
display:none;
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
background:rgba(0,0,0,.92);
z-index:99999;
justify-content:center;
align-items:center;
padding:20px;
box-sizing:border-box;
}

#imageViewer.active{
display:flex;
}

#viewerImage{
max-width:100%;
max-height:100%;
object-fit:contain;
}

#closeViewer{
position:absolute;
top:18px;
right:22px;
font-size:42px;
color:#fff;
cursor:pointer;
font-weight:bold;
line-height:1;
user-select:none;
}

/* ===========================
   Subject Analysis Table
=========================== */

.subject-divider{
margin:18px 0;
border:none;
border-top:1px solid #e5e7eb;
}

.analysis-table{
width:100%;
border-collapse:collapse;
margin-top:10px;
font-size:13px;
background:#fff;
overflow:hidden;
border-radius:10px;
}

.analysis-table th{
background:#f5f7fb;
padding:10px 6px;
text-align:center;
font-weight:700;
color:#374151;
border:1px solid #e5e7eb;
}

.analysis-table td{
padding:10px 6px;
text-align:center;
border:1px solid #e5e7eb;
font-weight:500;
}

.analysis-table tr:nth-child(even){
background:#fafafa;
}

.analysis-table tr:hover{
background:#f0f7ff;
transition:.2s;
}

.analysis-table td:first-child{
font-weight:700;
text-align:left;
padding-left:12px;
}

.analysis-table tr:nth-child(2) td:first-child{
color:#16a34a;
}

.analysis-table tr:nth-child(3) td:first-child{
color:#f59e0b;
}

.analysis-table tr:nth-child(4) td:first-child{
color:#dc2626;
}

/* Mobile */

@media(max-width:768px){

.analysis-table{

font-size:12px;

}

.analysis-table th,
.analysis-table td{

padding:8px 4px;

}

}

.badge-green{
background:#16a34a;
color:#fff;
}

.badge-orange{
background:#f59e0b;
color:#fff;
}

.badge-red{
background:#dc2626;
color:#fff;
}

.subject-status{
    width:100%;
    display:block;
    margin:0 0 18px 0;
    padding:14px 16px;
    border-radius:14px;
    box-sizing:border-box;
    clear:both;
}

.subject-grid{
    clear:both;
}

.subject-strong{
    background:#f0fdf4;
    border:1px solid #bbf7d0;
    color:#15803d;
}

.subject-average{
    background:#fffbeb;
    border:1px solid #fde68a;
    color:#b45309;
}

.subject-weak{
    background:#fef2f2;
    border:1px solid #fecaca;
    color:#b91c1c;
}

.subject-strong .subject-status-title{
background:#16a34a;
color:#fff;
}

.subject-average .subject-status-title{
background:#f59e0b;
color:#fff;
}

.subject-weak .subject-status-title{
background:#dc2626;
color:#fff;
}

.subject-status-title{
display:flex;
align-items:center;
gap:8px;
padding:8px 16px;
border-radius:999px;
font-size:18px;
font-weight:700;
margin-bottom:12px;
width:fit-content;
justify-content:center;
margin:0 auto 15px;
}

.subject-status-message{
font-size:15px;
line-height:1.6;
font-weight:500;
opacity:.9;
margin-top:4px;
text-align:center;
}

.review-image{
display:block;
width:auto;
height:auto;
margin:10px auto;
transition:.2s;
cursor:pointer;
}

.review-image.square{
max-width:80px;
max-height:80px;
}

.review-image.landscape{
max-width:250px;
max-height:150px;
}

.review-image.portrait{
max-width:140px;
max-height:220px;
}

.time-question-list{

margin-top:20px;

border-top:1px solid #e5e7eb;

padding-top:16px;

}

.time-list-title{

font-size:18px;

font-weight:700;

margin-bottom:12px;

color:#1f2937;

}

.time-question-row{

display:flex;

align-items:center;

gap:12px;

padding:12px 14px;

margin-bottom:10px;

background:#f8fafc;

border:1px solid #e5e7eb;

border-radius:12px;

cursor:pointer;

transition:.2s;

}

.time-question-row:hover{

background:#eef6ff;

border-color:#3b82f6;

}

.time-question-row > div{

font-size:14px;

font-weight:600;

}

.time-qno{

width:34px;

flex-shrink:0;

font-weight:700;

}

.time-subject{

flex:1;

display:flex;

align-items:center;

justify-content:flex-start;

text-align:left;

min-width:0;

}

.time-duration{

width:35px;

text-align:right;

font-weight:700;

}

.time-status{

width:20px;

text-align:right;

font-size:28px;

flex-shrink:0;

}

.question-badges{
display:flex;
gap:8px;
flex-wrap:wrap;
margin-bottom:8px;
}

.question-badge{
padding:6px 12px;
border-radius:20px;
font-size:13px;
font-weight:600;
color:#fff;
}

.badge-subject{
background:#2563eb;
}

.badge-difficulty{
background:#16a34a;
}

.question-counter{
font-size:15px;
font-weight:700;
white-space:nowrap;
}

.badge-easy{
    background:#16a34a;
}

.badge-medium{
    background:#f59e0b;
}

.badge-hard{
    background:#dc2626;
}

.not-visited{
    background:#ffffff;
    color:#222;
}

.not-answered{
    background:#2563eb;
    color:#fff;
}

.answered{
    background:#33b44a;
    color:#fff;
}

.review{
    background:#dc2626;
    color:#fff;
}

.answered-review{
    background:#fbc02d;
    color:#000;
}

#questionPalette .answered{
    background:#33b44a !important;
    color:#fff !important;
}

#questionPalette .review{
    background:#dc2626 !important;
    color:#fff !important;
}

#questionPalette .answered-review{
    background:#fbc02d !important;
    color:#000 !important;
}

#questionPalette .not-answered{
    background:#2563eb !important;
    color:#fff !important;
}

#questionPalette .not-visited{
    background:#ffffff !important;
    color:#222 !important;
}

#paletteArrow{
position:absolute;
width:0;
height:0;
border-left:10px solid transparent;
border-right:10px solid transparent;
border-top:10px solid #000;
display:none;
transition:left .2s ease;
}

.palette{
position:relative;
}

#questionPalette .review,
#questionPalette .answered-review{
    position:relative;
}

#questionPalette .review::before,
#questionPalette .answered-review::before{
    content: "";
    position: absolute;
    bottom:-12px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 10px solid #000;
}

.review-nav-header{
display:flex;
align-items:center;
justify-content:space-between;
padding:16px 18px;
background:#f8fafc;
border:1px solid #e2e8f0;
border-radius:14px !important;
cursor:pointer;
font-size:17px;
font-weight:700;
color:#1e293b;
margin-bottom:10px;
overflow:hidden;
}

.review-nav-card.active .review-nav-header{
margin-bottom:0;
border-radius:14px 14px 0 0 !important;
}

.review-nav-card.active .review-nav{
border-radius:0 0 14px 14px !important;
}

.review-nav-body{
display:none;
}

.review-nav-card.active .review-nav-body{
display:block;
}

.review-nav-card .arrow{
transform:rotate(45deg);
transition:.3s;
border-right-color:#1e293b;
border-bottom-color:#1e293b;
}

.review-nav-card.active .arrow{
transform:rotate(225deg);
}

.final-score-card{
display:flex;
flex-direction:row !important;
justify-content:space-between !important;
align-items:center;
min-height:auto;
height:auto !important;
padding:10px 100px;
width:100%;
margin:12px 0;
border-radius:18px;
background:linear-gradient(135deg,#2563eb,#1d4ed8);
color:#fff;
box-shadow:0 10px 25px rgba(37,99,235,.25);
box-sizing:border-box;
grid-column: 1 / -1;
}

@media(max-width:768px){

.final-score-card{
padding:10px 16px;
margin:14px 0;
}

}

.final-score-left{
font-size:20px;
font-weight:700;
display:flex;
align-items:center;
gap:8px;
}

.final-score-right{
font-size:24px;
font-weight:700;
line-height:1;
}

.report-question-link{
display:inline-flex;
align-items:center;
gap:6px;

margin-top:12px;
margin-left:6px;

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

color:#d32f2f;

cursor:pointer;
user-select:none;

transition:.2s;
}

.save-question-link{
display:inline-flex;
align-items:center;
gap:6px;

margin-top:12px;

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

color:#b45309;

cursor:pointer;
user-select:none;

transition:.2s;
}

.save-question-link:hover{
color:#92400e;
text-decoration:underline;
}

.save-question-link:active{
transform:scale(.98);
}

.save-question-link.save-question-active{
color:#16a34a;
}

.save-question-link.save-question-loading{
opacity:.55;
pointer-events:none;
}

.report-question-link:hover{
color:#b71c1c;
text-decoration:underline;
}

.report-question-link:active{
transform:scale(.98);
}

.report-modal{
display:none;
position:fixed;
inset:0;
background:rgba(0,0,0,.45);
z-index:99999;
align-items:center;
justify-content:center;
padding:20px;
}

.report-modal.active{
display:flex;
}

.report-modal-content{
background:#fff;
width:100%;
max-width:420px;
border-radius:16px;
padding:20px;
box-shadow:0 15px 40px rgba(0,0,0,.2);
}

.report-modal-content h3{
margin:0 0 18px;
font-size:22px;
font-weight:700;
color:#1e40af;
}

.report-options label{
display:block;
padding:10px 0;
font-size:15px;
cursor:pointer;
}

.report-options input{
margin-right:8px;
}

#reportComment{
width:100%;
margin-top:15px;
padding:12px;
border:1px solid #d1d5db;
border-radius:10px;
font-size:14px;
resize:vertical;
box-sizing:border-box;
}

.report-buttons{
display:flex;
justify-content:flex-end;
gap:10px;
margin-top:18px;
}

#reportCancelBtn,
#reportSubmitBtn{
border:none;
padding:10px 18px;
border-radius:10px;
font-size:15px;
font-weight:600;
cursor:pointer;
}

#reportCancelBtn{
background:#e5e7eb;
color:#111827;
}

#reportSubmitBtn{
background:#2563eb;
color:#fff;
}

.report-success-overlay{

position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(15,23,42,.6);

display:flex;
align-items:center;
justify-content:center;
padding:20px;

z-index:999999;

}

.report-success-box{

width:100%;
max-width:400px;

background:#fff;

border-radius:18px;

padding:32px 24px;

text-align:center;

box-shadow:0 10px 40px rgba(0,0,0,.25);

animation:reportPopup .25s ease;

}

@keyframes reportPopup{

from{

opacity:0;
transform:scale(.96);

}

to{

opacity:1;
transform:scale(1);

}

}

.success-title{

margin:0 0 10px;
font-size:26px;
font-weight:700;
color:#1e293b;
text-align:center;
}

.report-result-icon{
font-size:44px;
line-height:1;
margin-bottom:10px;
}

.report-result-error .success-title{
color:#dc2626;
}

.success-message{
font-size:14px;
color:#475569;
line-height:1.5;
margin:0 0 18px;
}

.success-message-error{
color:#b91c1c;
}

#closeReportSuccess,
#closeShareResult{

width:100%;

padding:13px;

border:none;

border-radius:12px;

background:#2563eb;

color:#fff;

font-size:15px;

font-weight:700;

cursor:pointer;

}

.report-result-error #closeReportSuccess{
background:#dc2626;
}

.report-success-ok-btn{
width:50% !important;
margin:0 auto;
display:block;
}

.success-info{

background:#eff6ff;
border:1px solid #bfdbfe;
color:#1d4ed8;
padding:12px 14px;
border-radius:10px;
font-size:13px;
font-weight:500;
line-height:1.5;
margin-bottom:18px;
}

.report-question-done{

margin-top:14px;

font-size:14px;

font-weight:600;

color:#15803d;

cursor:default;

}

/* -----------------------------------------------------
   Sticky app-frame layout -- FULLSCREEN MODE ONLY.
   Normal (embedded in a WordPress post) view stays exactly
   as it was: plain page scroll, buttons in normal flow.
   Once the real Fullscreen toggle is built, it will add the
   "mcq-fullscreen" class to #mcq-app -- and only then does
   the header stay fixed on top, the middle area scroll on
   its own, and the action buttons stick to the bottom.
------------------------------------------------------ */

.mcq-fullscreen .quiz-screen{
    display:flex;
    flex-direction:column;
    max-height:100vh;
    overflow:hidden;
    border-radius:0;
}

.mcq-fullscreen .quiz-header{
    flex-shrink:0;
}

.mcq-fullscreen .quiz-layout{
    flex:1 1 auto;
    overflow-y:auto;
    min-height:0;
    -webkit-overflow-scrolling:touch;
}

.mcq-fullscreen .sticky-footer-group{
    position:sticky;
    bottom:0;
    background:#fff;
    padding-top:14px;
    padding-bottom:6px;
    box-shadow:0 -4px 10px rgba(0,0,0,.08);
    z-index:5;
}

.mcq-fullscreen .action-buttons{
    margin-top:0;
    padding-top:0;
}

/* -----------------------------------------------------
   Part tabs (Part A/B/C/D)
------------------------------------------------------ */

.part-tabs-row{
    display:none;
    flex-wrap:wrap;
    gap:8px;
    margin:12px 0;
}

.part-tab-btn{
    padding:8px 16px;
    border-radius:8px;
    border:2px solid #c6d4e6;
    background:#fff;
    color:#2563eb;
    font-size:14px;
    font-weight:700;
    cursor:pointer;
    transition:.2s;
}

.part-tab-btn.active{
    background:#2563eb;
    border-color:#2563eb;
    color:#fff;
}

.part-tab-btn.locked{
    cursor:default;
    opacity:.85;
}

.part-tab-btn.locked:not(.active){
    opacity:.55;
}

@keyframes sectionLockFlash{
    0%,100%{ box-shadow:none; }
    50%{ box-shadow:0 0 0 4px rgba(220,38,38,.45); }
}

.part-tab-btn.locked-flash{
    animation:sectionLockFlash .7s ease;
}

/* -----------------------------------------------------
   Fullscreen + hamburger buttons in the header
------------------------------------------------------ */

.fullscreen-toggle-btn,
.hamburger-btn{
    width:38px;
    height:38px;
    box-sizing:border-box;
    margin:0;
    border-radius:8px;
    border:2px solid #c6d4e6;
    background:#fff;
    font-size:18px;
    line-height:1;
    cursor:pointer;
    display:none;
    align-items:center;
    justify-content:center;
}

.fullscreen-toggle-btn{
    display:inline-flex;
}

/* Hamburger is only meaningful once we're in fullscreen on
   a narrow screen -- the palette is visible inline otherwise. */
.mcq-fullscreen .hamburger-btn{
    display:none;
}

@media(max-width:900px){

    .mcq-fullscreen .hamburger-btn{
        display:inline-flex;
    }

}

/* -----------------------------------------------------
   Fullscreen "how to exit" toast
------------------------------------------------------ */

.fullscreen-toast-overlay{
    position:fixed;
    inset:0;
    background:transparent;
    z-index:9999;
    display:flex;
    align-items:flex-start;
    justify-content:flex-end;
    padding:70px 20px 0 20px;
    pointer-events:none;
}

.fullscreen-toast-box{
    position:relative;
    background:#fff;
    border-radius:12px;
    padding:16px 20px;
    max-width:260px;
    font-size:14px;
    font-weight:600;
    color:#2563eb;
    box-shadow:0 8px 24px rgba(0,0,0,.3);
    pointer-events:auto;
}

.toast-close-btn{
    position:absolute;
    top:-10px;
    right:-10px;
    width:26px;
    height:26px;
    border-radius:50%;
    border:none;
    background:#2563eb;
    color:#fff;
    font-size:14px;
    cursor:pointer;
}

/* -----------------------------------------------------
   Hamburger panel (reuses the existing .palette element)
------------------------------------------------------ */

.hamburger-profile{
    display:none;
}

.hamburger-summary{
    display:none;
}

@media(max-width:900px){

    .mcq-fullscreen .palette{
        position:fixed;
        top:0;
        right:0;
        height:100vh;
        width:80%;
        max-width:320px;
        background:#fff;
        z-index:60;
        overflow-y:auto;
        padding:20px;
        transform:translateX(100%);
        transition:transform .25s ease;
        box-shadow:-6px 0 20px rgba(0,0,0,.25);
    }

    .mcq-fullscreen .palette.palette-open{
        transform:translateX(0);
    }

    .mcq-fullscreen .hamburger-profile,
    .mcq-fullscreen .hamburger-summary{
        display:block;
    }

    .mcq-fullscreen .hamburger-profile{
        text-align:center;
        margin-bottom:16px;
        padding-bottom:16px;
        border-bottom:1px solid #e2e8f0;
    }

    .hamburger-avatar{
        width:56px;
        height:56px;
        border-radius:50%;
        overflow:hidden;
        margin:0 auto 8px;
        background:#e2e8f0;
        display:flex;
        align-items:center;
        justify-content:center;
        font-size:26px;
    }

    .hamburger-avatar img{
        width:100%;
        height:100%;
        object-fit:cover;
    }

    .hamburger-email{
        font-size:13px;
        font-weight:600;
        color:#475569;
    }

    .mcq-fullscreen .hamburger-summary{
        margin-top:16px;
        padding-top:16px;
        border-top:1px solid #e2e8f0;
    }

    .hamburger-summary-row{
        display:flex;
        justify-content:space-between;
        font-size:13px;
        padding:6px 0;
        color:#334155;
    }

}

/* -----------------------------------------------------
   Persistent floating controls (fullscreen + hamburger)
   Lives at the #mcq-app level so it survives the switch
   from the quiz screen to the result screen -- e.g. if the
   timer auto-submits while the user is in fullscreen, they
   can still find the same exit button on the result page.
------------------------------------------------------ */

#mcq-app{
    position:relative;
}

.mcq-floating-controls{
    position:absolute;
    top:14px;
    right:14px;
    z-index:40;
    display:flex;
    align-items:center;
    gap:8px;
}

.mcq-floating-controls button{
    flex-shrink:0;
    box-sizing:border-box;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.mcq-fullscreen .mcq-floating-controls{
    position:fixed;
}

.floating-controls-dock{
    position:absolute;
    top:14px;
    right:16px;
    z-index:5;
}

.quiz-title{
    position:relative;
}

/* Font size reduction (and the extra height for the two-row
   controls dock) only while a test is actively being taken --
   the same class is also used, unscoped, on the pre-quiz Start
   Screen, which must stay at its normal size/height. */
.quiz-screen .quiz-title{
    font-size:18px;
    box-sizing:border-box;
    min-height:104px;
}

/* Dark/light toggle now also occupies fullscreen's row-2 dock
   slot (previously empty there, since Pause Test moved to the
   hamburger drawer in fullscreen) -- back to the same 2-row
   height as normal mode, or a short title spills the icon
   column out below the banner. */
.mcq-fullscreen .quiz-screen .quiz-title{
    min-height:104px;
}

.quiz-title .quiz-title-text{
    display:block;
    padding-right:140px;
    text-align:left;
}

/* Start Screen title: same reserved-space idea as the in-quiz dock
   above, sized for the single stacked icon column here (fullscreen
   + Save Test star, 38px wide + 14px offset) instead of the wider
   in-quiz row of icons -- keeps the (still centered) title text
   from running underneath them. Symmetric left padding keeps the
   centering visually balanced rather than skewing it to one side. */
.mcq-start-screen .quiz-title{
    padding-left:70px;
    padding-right:70px;
    min-height:112px;
    box-sizing:border-box;
    display:flex;
    align-items:center;
    justify-content:center;
}

.floating-controls-dock .mcq-floating-controls{
    position:static !important;
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    width:126px;
    gap:6px;
}

.floating-controls-dock #fullscreenToggleBtn{
    order:1;
}

.floating-controls-dock .pause-test-btn-zoom{
    order:2;
    flex-basis:110px;
    width:110px;
    max-width:110px;
    box-sizing:border-box;
    margin:0;
    justify-content:center;
    height:32px;
    font-size:11px;
    padding:0 6px;
}

.floating-controls-dock .mcq-theme-toggle-btn{
    order:2;
    height:32px;
    width:32px;
    font-size:14px;
}

/* Nothing to show on the result page (no question
   palette there), so keep the hamburger button out of the
   way instead of leaving a dead button. */
.mcq-result-view .hamburger-btn{
    display:none !important;
}

/* =======================================================
   ROUND 3 FIXES: 3-button layout, part tabs single line,
   fullscreen polish, hamburger restructure, zoom, result
   scroll fix.
======================================================= */

/* ---- 3-button action row (Previous | Mark for Review | Next/Submit) ---- */

.action-buttons{
    display:flex;
    flex-wrap:nowrap;
    gap:8px;
    margin-top:16px;
}

.action-buttons button{
    flex:1;
    min-width:0;
    padding:12px 6px;
    font-size:14px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

#reviewBtn.is-marked{
    background:#7c3aed;
}

#nextBtn.is-submit{
    background:#16a34a;
}

@media(max-width:480px){

    .action-buttons button{
        font-size:12.5px;
        padding:12px 4px;
    }

}

/* ---- Part tabs: short A/B/C/D labels, one line ---- */

.part-tabs-row{
    flex-wrap:nowrap;
    overflow-x:auto;
    gap:6px;
}

.part-tab-btn{
    flex:1 1 0;
    padding:8px 4px;
    font-size:13px;
    text-align:center;
    white-space:nowrap;
}

/* ---- Fullscreen-only polish ---- */

.mcq-fullscreen .badge-subject{
    display:none;
}

.mcq-fullscreen .language-selector{
    width:auto;
    min-width:0;
    padding:6px 26px 6px 8px;
    font-size:13px;
}

/* ---- Floating controls: fullscreen, hamburger, zoom ---- */

.zoom-btn{
    width:38px;
    height:38px;
    border-radius:8px;
    border:2px solid #c6d4e6;
    background:#fff;
    font-size:12px;
    font-weight:700;
    cursor:pointer;
}

/* ---- Bigger, clearer fullscreen toast ---- */

.fullscreen-toast-overlay{
    padding:80px 16px 0 16px;
}

.fullscreen-toast-box{
    max-width:300px;
    padding:20px 24px;
    font-size:15.5px;
    line-height:1.5;
}

.toast-close-btn{
    width:30px;
    height:30px;
    font-size:15px;
    top:-12px;
    right:-12px;
}

/* ---- Hamburger backdrop ---- */

.hamburger-backdrop{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.4);
    z-index:55;
}

.hamburger-backdrop.visible{
    display:block;
}

.hamburger-close-btn{
    display:none;
}

@media(max-width:900px){

    .mcq-fullscreen .hamburger-close-btn{
        display:flex;
        align-items:center;
        justify-content:center;
        position:absolute;
        top:14px;
        right:14px;
        width:30px;
        height:30px;
        border-radius:50%;
        border:none;
        background:#f1f5f9;
        color:#334155;
        font-size:15px;
        cursor:pointer;
        z-index:2;
    }

}

/* ---- Hamburger content order/spacing ---- */

.hamburger-time-left{
    display:none;
}

@media(max-width:900px){

    .mcq-fullscreen .hamburger-time-left{
        display:block;
        text-align:center;
        font-size:15px;
        font-weight:700;
        color:#2563eb;
        margin:14px 0;
        padding-bottom:14px;
        border-bottom:1px solid #e2e8f0;
    }

}

.mcq-fullscreen .hamburger-summary{
    margin-top:0;
    padding-top:0;
    border-top:none;
    margin-bottom:16px;
    padding:14px;
    background:#f8fafc;
    border-radius:10px;
    border:1px solid #e2e8f0;
}

.hamburger-summary-heading{
    font-size:14px;
    font-weight:700;
    color:#2563eb;
    margin-bottom:8px;
    padding-bottom:8px;
    border-bottom:1px solid #e2e8f0;
}

.palette-heading{
    font-size:15px;
}

/* ---- Zoom (font size) support ---- */

:root{
    --mcq-zoom:1;
}

#questionText{
    font-size:calc(20px * var(--mcq-zoom));
}

.option-card{
    font-size:calc(16px * var(--mcq-zoom));
}

/* ---- Fix: result page must scroll inside fullscreen too ---- */

.mcq-fullscreen.mcq-result-view .quiz-screen{
    overflow-y:auto;
    display:block;
    max-height:100vh;
}

@media(max-width:480px){

    .mcq-floating-controls{
        top:8px;
        right:8px;
        gap:5px;
    }

    .fullscreen-toggle-btn,
    .hamburger-btn,
    .zoom-btn{
        width:32px;
        height:32px;
        font-size:11px;
    }

}

/* =======================================================
   ROUND 4 FIXES
======================================================= */

/* ---- Hide badges + progress bar in fullscreen, tighten header ---- */

.mcq-fullscreen .question-badges{
    display:none;
}

.mcq-fullscreen .progress-wrapper{
    display:none;
}

.mcq-fullscreen #questionNumber{
    display:flex;
    align-items:center;
}

.mcq-fullscreen .question-counter{
    font-size:16px;
}

/* ---- Thin border framing the question + options ---- */

.question-block{
    border:1px solid #e2e8f0;
    border-radius:16px;
    padding:0;
    overflow:hidden;
    box-shadow:0 1px 3px rgba(15,23,42,.06);
    flex-shrink:0;
}

#questionText{
    padding:20px 20px 18px;
    margin:0;
    line-height:1.55;
}

#questionImage{
    padding:0 20px;
}

#questionImage:empty{
    padding:0;
}

/* ---- Buttons always pinned to the bottom, even for a
   short question -- no black gap in fullscreen. ---- */

.question-area{
    display:flex;
    flex-direction:column;
    min-height:100%;
}

.sticky-footer-group{
    margin-top:auto;
    padding-top:20px;
}

.action-buttons{
    margin-top:0;
}

.mcq-fullscreen .quiz-screen{
    height:100vh;
    max-height:100vh;
    background:#fff;
}

#mcq-app{
    background:#fff;
}

.mcq-fullscreen.mcq-result-view .quiz-screen{
    height:100vh;
}

/* ---- Fullscreen title: superseded by the reserved-column
   approach above (.quiz-title-text / .floating-controls-dock),
   which already handles both modes identically. ---- */

/* ---- Hamburger: palette gets its own boxed card too
   (fullscreen drawer only -- the normal inline palette
   sidebar already has its own single background, so we
   don't want a box nested inside a box there). ---- */

.hamburger-palette-box{
    border:none;
    padding:0;
    margin-bottom:0;
    background:transparent;
}

@media(max-width:900px){

    .mcq-fullscreen .hamburger-palette-box{
        border:1px solid #e2e8f0;
        border-radius:10px;
        padding:14px;
        margin-bottom:16px;
        background:#fff;
    }

}

.hamburger-palette-box .palette-heading{
    margin:0 0 10px;
}

.mcq-fullscreen .hamburger-summary{
    margin-bottom:0;
}

/* =======================================================
   ROUND 5 FIXES
======================================================= */

/* ---- Apply the "cleaner header" styling everywhere,
   not just in fullscreen (badges hidden, compact language
   selector, progress bar hidden). ---- */

.badge-subject,
.question-badges,
.progress-wrapper{
    display:none;
}

.language-selector{
    width:auto;
    min-width:0;
    padding:6px 26px 6px 8px;
    font-size:13px;
}

#questionNumber{
    display:flex;
    align-items:center;
}

/* ---- Part tabs: no visible scrollbar line, always fit ---- */

.part-tabs-row{
    scrollbar-width:none;
    -ms-overflow-style:none;
}

.part-tabs-row::-webkit-scrollbar{
    display:none;
    height:0;
}

.part-tab-btn{
    padding:8px 2px;
    font-size:12px;
}

@media(max-width:400px){

    .part-tab-btn{
        font-size:11px;
        padding:7px 2px;
    }

}

@media(max-width:380px){

    .question-counter{
        font-size:13px;
    }

    .timer-box{
        padding:6px 10px;
        font-size:14px;
    }

    .language-selector{
        font-size:12px;
        padding:5px 6px;
    }

}

/* =======================================================
   ROUND 6 FIXES
======================================================= */

/* ---- Review Answers: slim full-width language bar ---- */

.review-top-bar{
    margin-top:16px;
    margin-bottom:14px;
}

.review-language-bar{
    width:100% !important;
    display:block;
    padding:10px 14px !important;
    font-size:14px !important;
    border-radius:8px;
}

/* ---- Zoom buttons only make sense during the active quiz
   question screen -- hidden on start/instructions/result. ---- */

#zoomInBtn,
#zoomOutBtn{
    display:none;
}

.mcq-quiz-active:not(.mcq-result-view) #zoomInBtn,
.mcq-quiz-active:not(.mcq-result-view) #zoomOutBtn{
    display:inline-flex;
}

/* =======================================================
   ROUND 7 FIXES
======================================================= */

/* ---- Bottom utility bar: always-available Submit shows
   everywhere; the Menu toggle only appears in fullscreen
   mobile (normal mode already shows the palette inline, so
   a toggle there would be redundant). ---- */

.bottom-utility-bar{
    display:flex;
    gap:10px;
    margin-top:10px;
}

.bottom-menu-btn{
    display:none;
}

@media(max-width:900px){

    .mcq-fullscreen .bottom-menu-btn{
        display:flex;
        flex:1;
        align-items:center;
        justify-content:center;
        gap:8px;
    }

}

.bottom-menu-btn{
    padding:12px;
    border-radius:10px;
    border:1px solid #cfd8dc;
    background:#f1f5f9;
    color:#2563eb;
    font-weight:700;
    font-size:14px;
    cursor:pointer;
}

.bottom-menu-caret{
    font-size:11px;
}

.bottom-submit-btn{
    flex:1;
    padding:12px;
    border-radius:10px;
    border:none;
    background:#16a34a;
    color:#fff;
    font-weight:700;
    font-size:14px;
    cursor:pointer;
}

.bottom-nextpart-btn{
    flex:1;
    padding:12px 6px;
    border-radius:10px;
    border:none;
    background:#7c3aed;
    color:#fff;
    font-weight:700;
    font-size:13px;
    text-align:center;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
}

/* =======================================================
   ROUND 8: Instructions screen + Symbols/Instructions popups
======================================================= */

.mcq-instructions-screen{
    background:#fff;
    border-radius:12px;
    box-shadow:0 2px 10px rgba(0,0,0,.08);
    margin:-2px -2px 2px;
    display:flex;
    flex-direction:column;
    max-height:85vh;
    overflow:hidden;
    position:relative;
}

.instr-scroll{
    overflow-y:auto;
    padding:24px 20px 8px;
    flex:1 1 auto;
    min-height:0;
}

.instr-scroll h2{
    margin:0 0 16px;
    font-size:22px;
    color:#2563eb;
}

.instr-section{
    margin-bottom:22px;
}

.instr-section h4{
    margin:0 0 8px;
    font-size:15px;
    color:#2563eb;
    border-bottom:1px solid #e2e8f0;
    padding-bottom:6px;
}

.instr-section ul{
    margin:0;
    padding-left:20px;
}

.instr-section li{
    margin-bottom:8px;
    line-height:1.5;
    font-size:14px;
}

.instr-table-wrap{
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    border-radius:8px;
}

.instr-table{
    width:100%;
    min-width:480px;
    border-collapse:collapse;
    font-size:13px;
}

.instr-table th,
.instr-table td{
    border:1px solid #e2e8f0;
    padding:7px 8px;
    text-align:left;
}

.instr-table th{
    background:#EDF2FF;
    color:#2563eb;
}

@media(max-width:420px){

    .instr-table{
        font-size:11.5px;
        min-width:420px;
    }

    .instr-table th,
    .instr-table td{
        padding:5px 6px;
    }

}

.symbols-table td:first-child{
    width:70px;
    text-align:center;
}

.legend-dot{
    display:inline-block;
    width:20px;
    height:20px;
    border-radius:4px;
}

.instr-sticky-footer{
    flex-shrink:0;
    padding:14px 20px;
    border-top:1px solid #e2e8f0;
    background:#fff;
    box-shadow:0 -4px 10px rgba(0,0,0,.06);
}

.instr-sticky-footer button{
    width:100%;
    padding:14px;
    border:none;
    border-radius:12px;
    background:#16a34a;
    color:#fff;
    font-size:17px;
    font-weight:700;
    cursor:pointer;
}

/* ---- Hamburger info links ---- */

.hamburger-info-links{
    display:flex;
    justify-content:space-between;
    gap:10px;
    margin-top:14px;
}

.hamburger-info-links a{
    font-size:13px;
    font-weight:600;
    color:#2563eb;
    text-decoration:none;
}

/* ---- Info popup (Symbols / Instructions from hamburger) ---- */

.mcq-info-popup-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.5);
    z-index:9998;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
}

.mcq-info-popup-box{
    background:#fff;
    border-radius:16px;
    width:100%;
    max-width:480px;
    max-height:80vh;
    overflow:hidden;
    padding:24px 20px;
    position:relative;
    display:flex;
    flex-direction:column;
}

.mcq-info-popup-box h2{
    flex-shrink:0;
}

.instr-scroll-popup{
    overflow-y:auto;
    flex:1 1 auto;
    min-height:0;
}

.mcq-info-popup-box h2{
    margin:0 0 16px;
    font-size:20px;
    color:#2563eb;
}

.mcq-info-popup-close{
    position:absolute;
    top:14px;
    right:14px;
    width:30px;
    height:30px;
    border-radius:50%;
    border:none;
    background:#f1f5f9;
    color:#334155;
    font-size:15px;
    cursor:pointer;
}

/* =======================================================
   ROUND 9: instructions table scroll, symbols legend visuals
======================================================= */

.instr-table-wrap{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}

.instr-table-wrap .instr-table{
    min-width:480px;
}

.instr-good-luck{
    text-align:center;
    font-weight:700;
    color:#2563eb;
    margin:4px 0 20px;
}

/* ---- Symbols legend visuals ---- */

.symbols-table td:first-child{
    width:110px;
    text-align:center;
}

.legend-radio{
    display:inline-block;
    width:18px;
    height:18px;
    border-radius:50%;
    border:2px solid #94a3b8;
    background:#fff;
    vertical-align:middle;
}

.legend-radio-checked{
    border-color:#2563eb;
    box-shadow:inset 0 0 0 4px #fff, inset 0 0 0 9px #2563eb;
}

.legend-dot{
    position:relative;
}

.legend-arrow{
    position:absolute;
    left:50%;
    bottom:-14px;
    transform:translateX(-50%);
    font-size:11px;
    line-height:1;
    color:#334155;
}

.legend-btn-sample{
    display:inline-block;
    padding:6px 10px;
    border-radius:8px;
    font-size:11.5px;
    font-weight:700;
    color:#fff;
    white-space:nowrap;
}

.legend-btn-next{
    background:#2563eb;
}

.legend-btn-prev{
    background:#6b7280;
}

.legend-btn-review{
    background:#f59e0b;
}

.legend-btn-unmark{
    background:#7c3aed;
}

/* =======================================================
   ROUND 10 FIXES
======================================================= */

/* ---- Sticky Start Test in fullscreen: first start screen ---- */

.mcq-fullscreen .mcq-start-screen{
    height:100vh;
    max-height:100vh;
    display:flex;
    flex-direction:column;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
}

.mcq-fullscreen #startQuizBtn{
    position:sticky;
    bottom:0;
    width:100%;
    margin-top:auto;
    padding-top:16px;
    box-shadow:0 -4px 10px rgba(0,0,0,.12);
    z-index:2;
}

/* ---- Sticky Start Test in fullscreen: instructions screen
   -- force full viewport height so short instructions still
   pin the button to the true bottom, not just after content. ---- */

.mcq-fullscreen .mcq-instructions-screen{
    height:100vh;
    max-height:100vh;
}

.mcq-fullscreen .instr-sticky-footer{
    position:sticky;
    bottom:0;
}

.toast-icon-inline{
    display:inline-flex;
    vertical-align:middle;
    width:20px;
    height:20px;
    border:1.5px solid #2563eb;
    border-radius:5px;
    padding:2px;
    margin:0 2px;
    color:#2563eb;
}

/* =======================================================
   Leaderboard
======================================================= */

.leaderboard-locked{
    text-align:center;
    padding:30px 16px;
}

.leaderboard-locked-icon{
    font-size:38px;
    margin-bottom:10px;
}

.leaderboard-locked h3{
    color:#2563eb;
    margin:0 0 10px;
}

.leaderboard-locked p{
    color:#64748b;
    font-size:14px;
    max-width:340px;
    margin:0 auto 20px;
}

.leaderboard-login-btn{
    display:inline-block;
    padding:12px 28px;
    border-radius:10px;
    background:#2563eb;
    color:#fff;
    font-weight:700;
    text-decoration:none;
}

.leaderboard-loading{
    text-align:center;
    color:#64748b;
    padding:24px;
}

.leaderboard-rank-cards{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin-bottom:20px;
}

.leaderboard-rank-card{
    background:#EDF2FF;
    border:1px solid #dbe3ea;
    border-radius:12px;
    padding:14px;
    text-align:center;
}

.leaderboard-rank-card-label{
    font-size:12.5px;
    color:#475569;
    margin-bottom:6px;
}

.leaderboard-rank-card-value{
    font-size:22px;
    font-weight:800;
    color:#2563eb;
}

.leaderboard-top-heading{
    margin:0 0 10px;
    color:#2563eb;
}

.leaderboard-list{
    border:1px solid #e2e8f0;
    border-radius:12px;
    overflow:hidden;
}

.leaderboard-row{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 14px;
    border-bottom:1px solid #eef2f6;
}

.leaderboard-row:last-child{
    border-bottom:none;
}

.leaderboard-row-you{
    background:#FEF9C3;
}

.leaderboard-rank{
    width:32px;
    font-weight:700;
    color:#475569;
    flex-shrink:0;
}

.leaderboard-avatar{
    width:30px;
    height:30px;
    border-radius:50%;
    object-fit:cover;
    flex-shrink:0;
}

.leaderboard-name{
    flex:1;
    font-weight:600;
    font-size:14px;
    color:#1e293b;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.leaderboard-score{
    font-weight:800;
    color:#16a34a;
}

.leaderboard-update-profile-link{
    font-size:12px;
    color:#2563eb;
    font-weight:700;
    text-decoration:none;
}

.leaderboard-rank-card-value-small{
    font-size:13px;
}

.leaderboard-mode-tabs{
    display:flex;
    gap:8px;
    margin-top:16px;
    margin-bottom:16px;
}

.leaderboard-mode-tab{
    flex:1;
    padding:9px;
    border:1px solid #cbd5e1;
    border-radius:8px;
    background:#f8fafc;
    color:#475569;
    font-weight:700;
    font-size:13px;
    cursor:pointer;
}

.leaderboard-mode-tab.active{
    background:#2563eb;
    border-color:#2563eb;
    color:#fff;
}

.leaderboard-scope-tabs{
    display:flex;
    gap:8px;
    margin-bottom:12px;
}

.leaderboard-scope-tab{
    flex:1;
    padding:8px;
    border:1px solid #cbd5e1;
    border-radius:8px;
    background:#f8fafc;
    color:#475569;
    font-weight:700;
    font-size:12.5px;
    cursor:pointer;
}

.leaderboard-scope-tab.active{
    background:#2563eb;
    border-color:#2563eb;
    color:#fff;
}

.leaderboard-your-score{
    text-align:center;
    font-size:14px;
    color:#334155;
    margin-bottom:14px;
}

.leaderboard-your-score b{
    color:#16a34a;
    font-size:16px;
}

.leaderboard-row-gap{
    text-align:center;
    padding:6px 0;
    color:#94a3b8;
    font-size:14px;
    letter-spacing:2px;
}

.leaderboard-rank-medal{
    font-size:20px;
    width:auto;
}

.leaderboard-row-medal-1{
    background:linear-gradient(90deg,#fff7e0,#fff);
    border-left:4px solid #f5b301;
}

.leaderboard-row-medal-2{
    background:linear-gradient(90deg,#f2f4f7,#fff);
    border-left:4px solid #9aa5b1;
}

.leaderboard-row-medal-3{
    background:linear-gradient(90deg,#fdeee0,#fff);
    border-left:4px solid #c8763a;
}

.leaderboard-row-medal.leaderboard-row-you{
    background:#FEF9C3;
}

/* =======================================================
   DARK MODE (second pass) - toggled via the fullscreen-only
   dark/light icon (mcqThemeToggleBtn) using a shared
   data-theme="dark" attribute on <html> + "smt_theme"
   localStorage key, same as the site theme's own header
   toggle.

   IMPORTANT lesson from the first pass: a blanket
   `[data-theme="dark"] p,span,label,div{color:...}` rule
   was overriding almost every element's OWN explicit color
   (badges, pills, .blue-card's blue text, the score circle's
   blue percentage, etc) because it matched so broadly and
   came later in the cascade -- that's what made large parts
   of the UI look washed-out/near-invisible. Removed entirely.
   `color` is inherited by default, so setting it once on each
   dark CONTAINER below is enough for any plain child text to
   pick it up naturally -- while anything with its OWN explicit
   color (buttons, badges, .blue-card etc) is left alone and
   keeps working exactly as it did in light mode, since those
   are unaffected by a container-level color change.
======================================================= */

/* =======================================================
   DARK MODE (third pass - thorough) - toggled via the
   fullscreen-only dark/light icon (mcqThemeToggleBtn) using
   a shared data-theme="dark" attribute on <html> + "smt_theme"
   localStorage key, same as the site theme's own header toggle.

   Full analysis done this round: cataloged every explicit
   `color:` declaration in this file (153 rules). Most are
   vivid semantic colours (blue/green/red/amber - correct,
   wrong, warnings etc) that stay perfectly readable on a dark
   background and are deliberately left untouched here, INCLUDING
   the question-palette's answered/wrong/review/not-visited
   colour-coding (semantic, SSC-standard - never touch per
   longstanding project rule). The problem was always the many
   near-black/muted-grey text colours (#1e293b, #64748b, #666,
   #333, #222, #0f172a, #334155, #475569 etc) that were tuned
   for WHITE backgrounds and become low-contrast or outright
   invisible on a dark navy background - EVERY one of those is
   listed explicitly below and bumped to a light colour.
   Two extra things found this round that silently blocked the
   second pass's container-background fix from ever showing:
   (1) `.review-card, .review-question{background:#fff !important}`
   and `body{background:#EDF2FF !important}` in the LIGHT-mode
   CSS use !important, so any dark override needs !important too
   or it's silently ignored; (2) several labels/values (e.g.
   .mcq-startcard-label/value, .subject-item span/strong) have
   their OWN explicit color on the child itself, so setting color
   on the parent container alone doesn't reach them - each such
   child is now listed by name below rather than relied upon to
   inherit.
======================================================= */

[data-theme="dark"] body{
background:#0f172a !important;
}

[data-theme="dark"] #mcq-app{
background:#1e293b;
color:#e2e8f0;
}

/* ---- Dark container backgrounds ---- */

[data-theme="dark"] .mcq-start-screen,
[data-theme="dark"] .mcq-instructions-screen,
[data-theme="dark"] .quiz-screen,
[data-theme="dark"] .question-box,
[data-theme="dark"] .mcq-access-gate,
[data-theme="dark"] .submit-modal-box,
[data-theme="dark"] .pause-overlay-box,
[data-theme="dark"] .fs-resume-box,
[data-theme="dark"] .mcq-info-popup-box{
background:#1e293b;
color:#e2e8f0;
box-shadow:0 2px 10px rgba(0,0,0,.3);
}

/* .result-card sits NESTED inside .quiz-screen (both dark navy) --
   giving it its own box-shadow too (as the group above does)
   created a doubled dark halo right at its edges, which is what
   was actually showing up as "two different backgrounds" on the
   result page. Same colour, no shadow, so it blends seamlessly
   into its parent instead. */
[data-theme="dark"] .result-card{
background:#1e293b;
color:#e2e8f0;
box-shadow:none;
}

[data-theme="dark"] .review-card,
[data-theme="dark"] .review-question{
background:#1e293b !important;
border-color:#334155 !important;
color:#e2e8f0;
}

/* .mcq-fullscreen forces these to solid white in the base CSS
   (so the sticky bottom bars don't show see-through content) -
   same idea in dark mode, just with a dark colour instead. */
[data-theme="dark"] .mcq-fullscreen .sticky-footer-group,
[data-theme="dark"] .mcq-fullscreen .quiz-screen,
[data-theme="dark"] .instr-sticky-footer{
background:#1e293b;
}

[data-theme="dark"] .mcq-fullscreen .hamburger-summary{
background:#0f172a;
border-color:#334155;
color:#e2e8f0;
}

[data-theme="dark"] .mcq-start-screen .quiz-meta > div,
[data-theme="dark"] .option-card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .subject-card,
[data-theme="dark"] .palette,
[data-theme="dark"] .subject-item,
[data-theme="dark"] .review-nav-card,
[data-theme="dark"] .leaderboard-rank-card,
[data-theme="dark"] .summary-box,
[data-theme="dark"] .analysis-table,
[data-theme="dark"] .time-question-row,
[data-theme="dark"] .mcq-sectional-toggle{
background:#0f172a;
border-color:#334155;
color:#e2e8f0;
}

[data-theme="dark"] .mcq-switch-slider{
background:#475569;
}

/* Difficulty table header row (Level/Total/Attempt/Correct/
   Accuracy/Avg Time) - kept visually distinct from the body
   rows instead of blending into the same shade. */
[data-theme="dark"] .analysis-table th{
background:#1e3a5f;
border-color:#334155;
color:#dbeafe;
}

/* Tabs/state-toggles: :not(.active) is essential here -- without
   it, this rule and each tab's own `.foo.active{background:blue}`
   rule have EQUAL CSS specificity (both are 2 class-level
   selectors), and since this dark block is appended at the very
   END of the file, it would otherwise win the tie and silently
   erase the active tab's blue highlight. This was the actual bug
   behind "active tab highlight missing in dark mode" everywhere
   (exam page tabs, part tabs, result tabs). */
[data-theme="dark"] .part-tab-btn:not(.active),
[data-theme="dark"] .result-tab:not(.active){
background:#0f172a;
border-color:#334155;
color:#e2e8f0;
}

/* Selected option: same equal-specificity issue as the tabs above
   (`.option-card` base rule vs `.option-card:has(input:checked)`)
   -- give the selected state its own dark-appropriate highlight
   instead of the light-mode #EFF6FF (which would render as a
   near-white box on a dark page). */
[data-theme="dark"] .option-card:has(input:checked){
background:#1e3a5f;
border-color:#2563eb;
}

[data-theme="dark"] .submit-time-left{
background:#1e3a5f;
border-color:#2563eb;
}

[data-theme="dark"] #keepWorkingBtn{
background:#0f172a;
border-color:#334155;
}

[data-theme="dark"] .mcq-download-pdf-btn{
background:#0f172a;
border-color:#2563eb;
color:#93c5fd;
}

[data-theme="dark"] #shareResultBtn{
background:#0f172a;
border-color:#2563eb;
color:#93c5fd;
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4{
color:#f1f5f9;
}

/* ---- Every specific near-black/muted-grey TEXT colour found
   in the light-mode CSS, bumped to a light colour. Vivid
   semantic colours (blue/green/red/amber accents, badges,
   the palette's answered/wrong/review states) are deliberately
   NOT in this list - they already read fine on dark. ---- */

[data-theme="dark"] .mcq-access-gate h2,
[data-theme="dark"] .mcq-startcard-value,
[data-theme="dark"] .mcq-sectional-toggle-label span,
[data-theme="dark"] .submit-modal-box h2,
[data-theme="dark"] .fs-resume-box h2,
[data-theme="dark"] .review-title h3,
[data-theme="dark"] .subject-title,
[data-theme="dark"] .review-nav-header,
[data-theme="dark"] .success-title,
[data-theme="dark"] .pause-overlay-box h2,
[data-theme="dark"] .review-screen h2,
[data-theme="dark"] .part-score-name,
[data-theme="dark"] .leaderboard-name,
[data-theme="dark"] .time-list-title,
[data-theme="dark"] .subject-item strong,
[data-theme="dark"] .performance-message b{
color:#f1f5f9;
}

[data-theme="dark"] .mcq-access-gate p,
[data-theme="dark"] .mcq-startcard-label,
[data-theme="dark"] .mcq-sectional-toggle-label small,
[data-theme="dark"] .cutoff-info,
[data-theme="dark"] .leaderboard-locked p,
[data-theme="dark"] .leaderboard-loading,
[data-theme="dark"] .leaderboard-your-score,
[data-theme="dark"] .fs-resume-box p,
[data-theme="dark"] .promo-link,
[data-theme="dark"] .final-score-text,
[data-theme="dark"] .pause-overlay-box p,
[data-theme="dark"] .leaderboard-rank-card-label,
[data-theme="dark"] .leaderboard-rank,
[data-theme="dark"] .hamburger-email,
[data-theme="dark"] .part-score-value,
[data-theme="dark"] .subject-item span,
[data-theme="dark"] .review-label,
[data-theme="dark"] .review-question-text,
[data-theme="dark"] .review-option-text,
[data-theme="dark"] #questionText,
[data-theme="dark"] #reportCancelBtn,
[data-theme="dark"] #keepWorkingBtn,
[data-theme="dark"] #mcqFullscreenDismissBtn,
[data-theme="dark"] #cancelPauseBtn,
[data-theme="dark"] #cancelNextPartBtn,
[data-theme="dark"] .success-message{
color:#cbd5e1;
}

[data-theme="dark"] .score-bg{
stroke:#334155;
}

[data-theme="dark"] .zoom-btn,
[data-theme="dark"] .mcq-theme-toggle-btn,
[data-theme="dark"] .fullscreen-toggle-btn,
[data-theme="dark"] .hamburger-btn,
[data-theme="dark"] .mcq-save-test-btn{
background:#1e293b;
border-color:#334155;
color:#e2e8f0;
}

[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea{
background:#0f172a;
border-color:#334155;
color:#e2e8f0;
color-scheme:dark;
}

html[data-theme="dark"]{
color-scheme:dark;
}

/* Some mobile browsers only respect color-scheme for a <select>'s
   background/text, not its own dropdown arrow glyph, leaving a
   near-invisible dark-on-dark arrow -- draw our own light chevron
   instead so it's never left to browser guesswork. */
[data-theme="dark"] select{
-webkit-appearance:none !important;
-moz-appearance:none !important;
appearance:none !important;
background-color:#0f172a !important;
background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e2e8f0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
background-repeat:no-repeat !important;
background-position:right 10px center !important;
background-size:16px !important;
padding-right:30px !important;
}

[data-theme="dark"] .part-score-bar-track{
background:#334155;
}

/* Leaderboard rows/list items -- keep their own semantic
   colours (medal highlight, "you" row etc) but need a dark
   base row background + border instead of the light-mode
   white/pastel default. */
[data-theme="dark"] .leaderboard-row:not(.leaderboard-row-you){
background:#0f172a;
border-color:#334155;
color:#e2e8f0;
}

[data-theme="dark"] .leaderboard-row-you{
background:#3a2e10;
border-color:#78350f;
}

[data-theme="dark"] .leaderboard-row-you .leaderboard-name{
color:#fde68a;
}



/* =======================================================
   DARK MODE (fourth pass) - user's detailed result-page +
   hamburger + popups + leaderboard + language-select audit.
======================================================= */

/* Circular score % text -> white instead of blue, reads
   better against the dark card per explicit request. */
[data-theme="dark"] .score-text span{
color:#fff;
}

/* Review tab: Question Navigator (both collapsed header and
   the open number-grid), individual review-answer options,
   and the explanation box. Explicit radius (defensive, in case
   the base rule's radius wasn't being picked up) + join the
   header/grid visually into one rounded block (no gap, square
   corners in the middle) when the section is open. */
[data-theme="dark"] .review-nav-header,
[data-theme="dark"] .review-nav{
background:#0f172a;
border-color:#334155;
}

[data-theme="dark"] .review-answer-option{
background:#0f172a;
border-color:#334155;
color:#e2e8f0;
}

[data-theme="dark"] .review-option-letter{
background:#1e293b;
border-color:#334155;
color:#e2e8f0;
}

[data-theme="dark"] .review-answer-correct{
background:#052e16;
border-color:#166534;
}

[data-theme="dark"] .review-answer-user{
background:#450a0a;
border-color:#7f1d1d;
}

[data-theme="dark"] .review-explanation{
background:#1e3a5f;
border-color:#2563eb;
color:#e2e8f0;
}

[data-theme="dark"] .review-exp-title{
color:#fff;
}

[data-theme="dark"] .review-exp-text{
color:#fff;
}

/* Subject/Topic Analysis difficulty table: alternating-row
   striping was a near-white shade meant for a light table --
   give it a dark-appropriate alternate instead. */
[data-theme="dark"] .analysis-table tr:nth-child(even){
background:#1e293b;
}

[data-theme="dark"] .analysis-table tr:hover{
background:#1e3a5f;
}

/* Tab-style toggles with the same equal-specificity-vs-.active
   issue as result/part tabs (see the big comment on that fix
   above) -- leaderboard mode (This Attempt/Best Score) and
   scope (Global/State) tabs, language-select buttons. */
[data-theme="dark"] .leaderboard-mode-tab:not(.active),
[data-theme="dark"] .leaderboard-scope-tab:not(.active),
[data-theme="dark"] .lang-option-btn:not(.active){
background:#0f172a;
border-color:#334155;
color:#e2e8f0;
}

/* Hamburger drawer: Pause Test entry, Question Navigator
   heading, Part X Analysis box text. */
[data-theme="dark"] .mcq-fullscreen .pause-test-btn-hamburger{
background:#1e3a5f;
border-color:#2563eb;
color:#dbeafe;
}

[data-theme="dark"] .mcq-fullscreen .hamburger-palette-box{
background:#0f172a;
border-color:#334155;
}

/* Fullscreen "press this button to exit" hint + the 5min/1min
   timer-warning toast - both share .fullscreen-toast-box. */
[data-theme="dark"] .fullscreen-toast-box{
background:#1e293b;
color:#93c5fd;
box-shadow:0 8px 24px rgba(0,0,0,.5);
}

[data-theme="dark"] .pause-test-btn-zoom{
background:#0f172a;
border-color:#334155;
color:#93c5fd;
}

[data-theme="dark"] .palette-heading{
color:#f1f5f9;
}

[data-theme="dark"] .hamburger-summary *{
color:#e2e8f0;
}

/* Popups/modals: language-change (Start Screen + in-quiz),
   Attempt-Analysis category/test picker, fullscreen custom
   prompt, Go-to-Next-Part / Pause-Test cancel buttons, the
   two Time-Left pills, and the paused-state note + the
   not-all-attempted submit warning (both were being silently
   greyed out by the earlier round's broad `.xxx-box p` text
   rule stomping their own semantic amber colour -- given an
   explicit, higher-priority override here instead). */
/* Native <select> dropdowns (language selector during the quiz,
   Attempt Analysis's Category/Test pickers in auth.js) -- already
   covered by the `select{}` rule elsewhere, color-scheme:dark
   additionally asks the browser to render the native OPEN
   dropdown list itself (not just the closed control) in dark
   colours too, where the browser supports it. */
[data-theme="dark"] select{
color-scheme:dark;
}

[data-theme="dark"] #mcqFullscreenDismissBtn,
[data-theme="dark"] #cancelPauseBtn,
[data-theme="dark"] #cancelNextPartBtn{
background:#0f172a;
border-color:#334155;
color:#e2e8f0;
}

[data-theme="dark"] .pause-overlay-note,
[data-theme="dark"] .submit-warning{
background:#3a2e10 !important;
color:#fbbf24 !important;
border-color:#fbbf24 !important;
}

[data-theme="dark"] .submit-time-left{
color:#fff;
}

[data-theme="dark"] .submit-time-left b{
color:#fff;
}

/* Result Summary's 8 stat boxes: user clarified "black" was a
   slip of the tongue - should match the same navy shade used
   everywhere else (e.g. Time Analysis's stat boxes), not literal
   pure black. */
[data-theme="dark"] .blue-card,
[data-theme="dark"] .not-attempted,
[data-theme="dark"] .correct-answers,
[data-theme="dark"] .wrong-answers,
[data-theme="dark"] .negative-marks{
background:#0f172a;
color:#e2e8f0;
border-color:#334155;
}

[data-theme="dark"] .blue-card *,
[data-theme="dark"] .not-attempted *,
[data-theme="dark"] .correct-answers *,
[data-theme="dark"] .wrong-answers *,
[data-theme="dark"] .negative-marks *{
color:#e2e8f0;
}


/* ==========================================================
   v1.8.14 - Test start page, owner's chosen "Design B" (phones).
   Compact card: the four facts as small chips in one row, language
   buttons, full-width Start Test. The card fills the space between
   the breadcrumb and the bottom menu (--mcq-start-h is measured by a
   small script in quiz-security.php): when the content is short the
   gaps spread out evenly, when it's long the card simply grows and
   the page scrolls. Very short screens get a tighter version.
   Desktop keeps the original layout. The old app bar stays hidden.
   ========================================================== */
.mcq-appbar{
display:none !important;
}

@media (max-width:782px){

body.mcq-test-page #mcq-app:not(.mcq-quiz-active):not(.mcq-fullscreen) .mcq-start-screen{
display:flex;
flex-direction:column;
justify-content:flex-start;
min-height:min(var(--mcq-start-h, 0px), 520px);
box-sizing:border-box;
padding:14px 14px 16px;
margin:0;
}

body.mcq-test-page #mcq-app:not(.mcq-quiz-active):not(.mcq-fullscreen) .mcq-start-screen .quiz-title{
margin:-14px -14px 0;
padding:16px 58px;
min-height:72px;
font-size:19px;
line-height:1.3;
flex:0 0 auto;
}

body.mcq-test-page #mcq-app:not(.mcq-quiz-active):not(.mcq-fullscreen) > #saveTestBtn{
top:14px !important;
left:14px !important;
right:auto !important;
}

/* v1.8.15: no filler under Start Test any more - the button sits at
   the bottom of the card, free space is shared above the boxes, the
   language block and the button. */

/* v1.8.15: back to two boxes per row (owner's choice), icon + full label */
body.mcq-test-page #mcq-app:not(.mcq-quiz-active):not(.mcq-fullscreen) .quiz-meta{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
margin:auto 0 0;
padding-top:16px;
}

body.mcq-test-page #mcq-app:not(.mcq-quiz-active):not(.mcq-fullscreen) .quiz-meta div{
gap:3px;
padding:12px 8px;
border-radius:12px;
box-shadow:none;
min-width:0;
}

body.mcq-test-page #mcq-app:not(.mcq-quiz-active):not(.mcq-fullscreen) .mcq-startcard-icon{
font-size:19px;
}

body.mcq-test-page #mcq-app:not(.mcq-quiz-active):not(.mcq-fullscreen) .mcq-startcard-value{
font-size:18px;
white-space:nowrap;
}

body.mcq-test-page #mcq-app:not(.mcq-quiz-active):not(.mcq-fullscreen) .start-language-select{
margin:auto 0 0;
padding-top:18px;
padding-bottom:18px; /* minimum gap above Start Test */
}

body.mcq-test-page #mcq-app:not(.mcq-quiz-active):not(.mcq-fullscreen) .quiz-meta:has(+ #startQuizBtn){
padding-bottom:18px; /* single-language tests */
}

body.mcq-test-page #mcq-app:not(.mcq-quiz-active):not(.mcq-fullscreen) .start-language-select h3{
font-size:13px;
font-weight:600;
color:#64748b;
margin:0 0 10px;
}

body.mcq-test-page #mcq-app:not(.mcq-quiz-active):not(.mcq-fullscreen) #startQuizBtn{
width:100%;
margin:auto 0 0;
flex:0 0 auto;
padding:15px 20px;
border-radius:12px;
font-size:17px;
font-weight:700;
}

}

/* v1.8.15 - test page on phones (owner's request): no breadcrumb, a
   normal small gap under the header, no site footer, and the floating
   moon button hidden (it sat on top of Start Test). Header and the
   bottom menu (Mock Tests / SSC News / Profile) stay. Rank Math still
   prints the breadcrumb schema in <head>, so SEO is unaffected. */
@media (max-width:782px){

body.mcq-test-page .ct-breadcrumbs,
body.mcq-test-page .rank-math-breadcrumb{
display:none !important;
}

body.mcq-test-page .hero-section:not(:has(h1)){
display:none !important;
}

body.mcq-test-page{
--theme-content-vertical-spacing:16px;
}

body.mcq-test-page [data-vertical-spacing]{
padding-top:16px !important;
}

body.mcq-test-page #footer,
body.mcq-test-page .ct-footer,
body.mcq-test-page footer.site-footer{
display:none !important;
}

body.mcq-test-page .smt-theme-toggle-floating{
display:none !important;
}

}

/* short phones: tighter spacing so it still fits */
@media (max-width:782px) and (max-height:680px){

body.mcq-test-page #mcq-app:not(.mcq-quiz-active):not(.mcq-fullscreen) .mcq-start-screen .quiz-title{
padding:12px 56px;
font-size:17px;
}

body.mcq-test-page #mcq-app:not(.mcq-quiz-active):not(.mcq-fullscreen) .quiz-meta div{
padding:9px 6px;
}

body.mcq-test-page #mcq-app:not(.mcq-quiz-active):not(.mcq-fullscreen) .mcq-startcard-icon{
display:none;
}

body.mcq-test-page #mcq-app:not(.mcq-quiz-active):not(.mcq-fullscreen) .quiz-meta,
body.mcq-test-page #mcq-app:not(.mcq-quiz-active):not(.mcq-fullscreen) .start-language-select{
padding-top:12px;
}

body.mcq-test-page #mcq-app:not(.mcq-quiz-active):not(.mcq-fullscreen) #startQuizBtn{
padding:13px 20px;
}

}

/* ==========================================================
   v1.4.0 - Android's own "exit full screen" hint
   Right after entering fullscreen, Android shows its own system
   message at the bottom of the screen for a while. No website can
   hide or move it, so for the first 30 seconds of fullscreen the
   bottom buttons (Start Test on the instructions screen, and the
   question buttons) sit higher, above that message, then slide
   back down.
   ========================================================== */
@media (max-width:900px) and (pointer:coarse){

.mcq-fullscreen .instr-sticky-footer,
.mcq-fullscreen .sticky-footer-group,
.mcq-fullscreen #startQuizBtn{
transition:padding-bottom .35s ease;
}

.mcq-fullscreen.mcq-fs-guard .instr-sticky-footer{
padding-bottom:96px;
}

.mcq-fullscreen.mcq-fs-guard .sticky-footer-group{
padding-bottom:96px;
}

.mcq-fullscreen.mcq-fs-guard #startQuizBtn{
margin-bottom:96px;
}

}


/* v1.5.0 - PDF "being prepared" ring timer */
.mcq-pdf-prep-overlay{
position:fixed;
inset:0;
z-index:100000;
background:rgba(15,23,42,.6);
display:flex;
align-items:center;
justify-content:center;
padding:20px;
}
.mcq-pdf-prep-box{
position:relative;
width:100%;
max-width:340px;
background:#fff;
border-radius:14px;
padding:28px 22px 22px;
text-align:center;
box-shadow:0 12px 32px rgba(15,23,42,.25);
}
.mcq-pdf-prep-close{
position:absolute;
top:8px;
right:8px;
width:34px;
height:34px;
border:0;
border-radius:50%;
background:#f1f5f9;
color:#475569;
font-size:15px;
cursor:pointer;
}
.mcq-pdf-ring{
position:relative;
width:120px;
height:120px;
margin:0 auto 14px;
}
.mcq-pdf-ring svg{
transform:rotate(-90deg);
}
.mcq-pdf-ring-bg{
fill:none;
stroke:#e2e8f0;
stroke-width:7;
}
.mcq-pdf-ring-fg{
fill:none;
stroke:#2563eb;
stroke-width:7;
stroke-linecap:round;
transition:stroke-dashoffset 1s linear;
}
.mcq-pdf-prep-overlay.is-ready .mcq-pdf-ring-fg{
stroke:#16a34a;
}
.mcq-pdf-prep-overlay.is-error .mcq-pdf-ring-fg{
stroke:#dc2626;
}
.mcq-pdf-ring-num{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
font-size:34px;
font-weight:700;
color:#1e293b;
}
.mcq-pdf-prep-title{
margin:0 0 6px;
font-size:17px;
font-weight:700;
color:#1e293b;
}
.mcq-pdf-prep-sub{
margin:0;
font-size:13.5px;
color:#64748b;
}
.mcq-pdf-prep-download,
.mcq-pdf-prep-retry{
width:100%;
margin-top:18px;
padding:13px;
border:0;
border-radius:12px;
background:#16a34a;
color:#fff;
font-size:16px;
font-weight:700;
cursor:pointer;
}
.mcq-pdf-prep-retry{
background:#2563eb;
}
[data-theme="dark"] .mcq-pdf-prep-box{
background:#1e293b;
}
[data-theme="dark"] .mcq-pdf-prep-title,
[data-theme="dark"] .mcq-pdf-ring-num{
color:#f1f5f9;
}
[data-theme="dark"] .mcq-pdf-prep-sub{
color:#94a3b8;
}
[data-theme="dark"] .mcq-pdf-ring-bg{
stroke:#334155;
}
[data-theme="dark"] .mcq-pdf-prep-close{
background:#334155;
color:#cbd5e1;
}

/* v1.7.0 - free-month line inside the "Paid Feature" popup */
.mcq-upgrade-free-month{
margin-top:8px !important;
padding:8px 10px;
border-radius:10px;
background:#f0fdf4;
color:#166534 !important;
font-size:14px;
}
[data-theme="dark"] .mcq-upgrade-free-month{
background:#052e1a;
color:#86efac !important;
}

/* ==========================================================
   v1.8.16 - WhatsApp strip under the test result (owner-approved
   design). Blue tint + red dot when a live test is scheduled,
   green tint with an invite line otherwise.
   ========================================================== */
.mcq-wa-strip{
margin:14px 0 4px;
padding:12px;
border-radius:12px;
background:#f0fdf4;
border:1px solid #bbf7d0;
}

.mcq-wa-strip[hidden]{
display:none;
}

.mcq-wa-strip.has-live{
background:#eff6ff;
border-color:#bfdbfe;
}

.mcq-wa-strip-row{
display:flex;
align-items:center;
gap:8px;
font-size:14px;
color:#1e293b;
margin-bottom:10px;
}

.mcq-wa-strip-row b{
color:#dc2626;
}

.mcq-wa-strip-plain{
justify-content:center;
text-align:center;
font-weight:700;
color:#166534;
}

.mcq-wa-strip-dot{
width:9px;
height:9px;
border-radius:50%;
background:#dc2626;
flex-shrink:0;
}

.mcq-wa-strip-btn{
display:flex;
align-items:center;
justify-content:center;
gap:8px;
background:#16a34a;
color:#fff !important;
font-weight:700;
font-size:15px;
border-radius:10px;
padding:11px;
text-decoration:none !important;
}

.mcq-wa-strip-btn svg{
flex-shrink:0;
}

[data-theme="dark"] .mcq-wa-strip{
background:rgba(22,163,74,.12);
border-color:rgba(22,163,74,.35);
}

[data-theme="dark"] .mcq-wa-strip.has-live{
background:rgba(37,99,235,.14);
border-color:rgba(37,99,235,.4);
}

[data-theme="dark"] .mcq-wa-strip-row{
color:#e2e8f0;
}

[data-theme="dark"] .mcq-wa-strip-row b{
color:#f87171;
}

[data-theme="dark"] .mcq-wa-strip-plain{
color:#86efac;
}

/* v1.8.18: explanation keeps its line breaks (step-by-step solutions) */
.mcq-expl-text{
white-space:pre-line;
}


/* ==========================================================
   v1.9.1 - Owner feedback on test screens
   - Square pictures were huge: question pictures now stop at a
     sensible height (wide charts are unaffected - they are limited
     by width anyway), option pictures are kept small.
   - Default text a bit smaller on the question screen and in
     Review Answers (A+ still enlarges it).
   ========================================================== */
#questionImage img,
.review-question-image img,
.review-image{
max-height:min(300px,40vh);
width:auto;
}

.option-content .option-image,
.review-option-text .review-image{
max-width:min(170px,100%);
max-height:120px;
width:auto;
height:auto;
}

#questionText{
font-size:calc(18px * var(--mcq-zoom));
}

.option-card{
font-size:calc(15.5px * var(--mcq-zoom));
}

.review-question-text{
font-size:17px;
line-height:1.6;
}

.review-option-text{
font-size:16px;
}

@media (max-width:600px){

#questionImage img,
.review-question-image img,
.review-image{
max-height:min(230px,34vh);
}

.option-content .option-image,
.review-option-text .review-image{
max-width:min(140px,100%);
max-height:100px;
}

#questionText{
font-size:calc(16.5px * var(--mcq-zoom));
}

.option-card{
font-size:calc(15px * var(--mcq-zoom));
}

.review-question-text{
font-size:16px;
}

.review-option-text{
font-size:15px;
}

}

/* ==========================================================
   v1.9.6 - Question screen on phones (owner's request): more room
   for the question.
   - Title on its own line(s) at the top, the A- / A+ / fullscreen /
     theme (/ Pause) buttons in one row under it; slimmer blue bar.
   - "Question 1 of 20 / language / timer" row ~15% slimmer and closer
     to the header.
   - The 5 bottom buttons ~15% shorter, same height as the timer.
   - Less padding around the question and the options, narrower side
     margins, smaller square question pictures.
   - While the buttons are lifted for Android's fullscreen message, a
     small line tells the student to swipe that message away.
   ========================================================== */
@media (max-width:600px){

#mcq-app.mcq-quiz-active .quiz-screen{
padding-left:10px;
padding-right:10px;
}

#mcq-app.mcq-quiz-active .quiz-title{
display:flex;
flex-direction:column;
align-items:stretch;
gap:6px;
padding:10px 14px 9px;
margin-left:-10px;
margin-right:-10px;
margin-bottom:12px;
min-height:0;
text-align:left;
}

#mcq-app.mcq-quiz-active .quiz-title-text{
padding:0 !important;
text-align:left;
line-height:1.3;
}

#mcq-app.mcq-quiz-active #floatingControlsDock{
position:static !important;
top:auto !important;
right:auto !important;
transform:none !important;
display:flex;
justify-content:flex-end;
width:100%;
}

#mcq-app.mcq-quiz-active #mcqFloatingControls{
position:static !important;
display:flex;
flex-direction:row !important;
flex-wrap:nowrap !important;
align-items:center;
justify-content:flex-end;
gap:6px;
width:auto;
max-width:100%;
}

#mcq-app.mcq-quiz-active .quiz-top-bar{
margin:4px 0 9px;
}

#mcq-app.mcq-quiz-active #questionNumber{
font-size:15px;
}

#mcq-app.mcq-quiz-active .language-selector{
padding-top:3px;
padding-bottom:3px;
min-height:0;
height:30px;
}

#mcq-app.mcq-quiz-active .timer-box{
padding:5px 11px;
font-size:15px;
line-height:20px;
}

#mcq-app.mcq-quiz-active #questionText{
padding:12px 13px 10px;
line-height:1.5;
}

#mcq-app.mcq-quiz-active #questionImage{
margin:4px 0 10px;
padding:0 12px;
}

#mcq-app.mcq-quiz-active #questionImage img{
max-height:min(185px,26vh);
}

#mcq-app.mcq-quiz-active .option-card{
padding:11px 13px;
}

#mcq-app.mcq-quiz-active .sticky-footer-group{
padding-top:9px;
}

#mcq-app.mcq-quiz-active .sticky-footer-group button{
padding-top:8px;
padding-bottom:8px;
min-height:0;
line-height:1.25;
}

#mcq-app.mcq-quiz-active .bottom-utility-bar{
margin-top:8px;
}

.mcq-fullscreen.mcq-fs-guard .sticky-footer-group::after{
content:"👇 नीचे वाला message हटाने के लिए उसे साइड में swipe करें";
display:block;
margin-top:10px;
text-align:center;
font-size:12.5px;
font-weight:600;
color:#64748b;
}

[data-theme="dark"] .mcq-fullscreen.mcq-fs-guard .sticky-footer-group::after{
color:#94a3b8;
}

}


/* ==========================================================
   v1.9.7 - owner feedback on the phone question screen
   ========================================================== */
.palette-part-label{
grid-column:1 / -1;
font-size:12.5px;
font-weight:700;
color:#475569;
margin:6px 0 -2px;
}

.palette-part-label:first-child{
margin-top:0;
}

[data-theme="dark"] .palette-part-label{
color:#94a3b8;
}

@media (max-width:600px){

/* Part A / B / C / D tabs ~15% smaller */
#mcq-app.mcq-quiz-active .part-tab-btn{
padding-top:6px;
padding-bottom:6px;
font-size:12.5px;
min-height:0;
}

#mcq-app.mcq-quiz-active .part-tabs-row{
margin-bottom:8px;
}

/* Previous / Mark Review / Save & Next back to their full size
   (palette + Submit stay compact) */
#mcq-app.mcq-quiz-active .action-buttons button{
padding-top:12px;
padding-bottom:12px;
line-height:normal;
}

/* square question pictures another ~10% smaller */
#mcq-app.mcq-quiz-active #questionImage img{
max-height:min(165px,23vh);
}

/* swipe hint sits lower, right above Android's message */
.mcq-fullscreen.mcq-fs-guard .sticky-footer-group::after{
content:"👇 नीचे वाला message साइड में swipe करके हटाएँ, फिर इस खाली जगह पर touch करें";
margin-top:30px;
padding:0 10px;
line-height:1.4;
}

}

/* v1.9.8: swipe hint right above Android's message (less empty space) */
@media (max-width:600px){
#mcq-app.mcq-fullscreen.mcq-fs-guard .sticky-footer-group{
padding-bottom:78px;
}
#mcq-app.mcq-fullscreen.mcq-fs-guard .sticky-footer-group::after{
margin-top:14px;
}
}

/* v1.9.9: Hindi line under the section-submit question; Review Answers
   language box was squeezed by the compact phone rule (text cut). */
.mcq-section-summary-hi{
margin-top:-4px;
}

#mcq-app .review-language-bar,
#mcq-app.mcq-quiz-active .review-language-bar{
height:auto !important;
min-height:42px;
line-height:1.4 !important;
padding:9px 34px 9px 14px !important;
}