/* MCQ Master Pro – Premium Frontend Styles v3.0 */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800;900&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap');

/* ═══════════════════════════════════════════════
   CSS VARIABLES
═══════════════════════════════════════════════ */
.mcq-quiz-container {
    --mcq-c1: #7C3AED;
    --mcq-c2: #A78BFA;
    --mcq-c3: #EC4899;
    --mcq-c4: #06B6D4;
    --mcq-ok: #10B981;
    --mcq-err: #EF4444;
    --mcq-warn: #F59E0B;
    --mcq-bg: #F8F7FF;
    --mcq-white: #FFFFFF;
    --mcq-text: #0F0A1E;
    --mcq-muted: #6B7280;
    --mcq-border: #E8E3FF;
    --mcq-r: 20px;
    --mcq-shadow: 0 25px 80px rgba(124,58,237,.12), 0 0 0 1px var(--mcq-border);
    --mcq-glass: rgba(255,255,255,.85);
    font-family: 'DM Sans', sans-serif;
    max-width: 820px;
    margin: 40px auto;
    background: var(--mcq-bg);
    border-radius: 28px;
    overflow: hidden;
    box-shadow: var(--mcq-shadow);
    position: relative;
}

/* ═══════════════════════════════════════════════
   QUIZ HEADER – Premium Gradient
═══════════════════════════════════════════════ */
.mcq-quiz-header {
    background: linear-gradient(135deg, #4F1D96 0%, #7C3AED 45%, #EC4899 100%);
    padding: 40px 44px 32px;
    color: #fff;
    position: relative;
    overflow: hidden;
}
.mcq-quiz-header::before {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at 10% 50%, rgba(255,255,255,.08) 0%, transparent 60%),
        radial-gradient(ellipse at 90% 20%, rgba(255,255,255,.06) 0%, transparent 50%);
}
.mcq-quiz-header::after {
    content: '';
    position: absolute;
    right: -60px; top: -60px;
    width: 300px; height: 300px;
    background: rgba(255,255,255,.04);
    border-radius: 50%;
}
.mcq-header-inner { position: relative; z-index: 1; }
.mcq-quiz-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,.15); backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 30px; padding: 5px 14px;
    font-size: 11px; font-weight: 700; letter-spacing: .6px;
    text-transform: uppercase; color: rgba(255,255,255,.9);
    margin-bottom: 14px;
}
.mcq-quiz-title {
    font-family: 'Sora', sans-serif;
    font-size: 28px; font-weight: 900;
    margin: 0 0 8px; line-height: 1.2;
    text-shadow: 0 2px 10px rgba(0,0,0,.15);
}
.mcq-quiz-subtitle {
    font-size: 15px; opacity: .85;
    margin: 0 0 24px; line-height: 1.5;
}
.mcq-quiz-meta {
    display: flex; flex-wrap: wrap; gap: 10px;
}
.mcq-meta-chip {
    display: inline-flex; align-items: center; gap: 7px;
    background: rgba(255,255,255,.18); backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 30px; padding: 8px 18px;
    font-size: 13px; font-weight: 600; color: #fff;
    transition: background .2s;
}
.mcq-meta-chip:hover { background: rgba(255,255,255,.28); }
.mcq-meta-icon { font-size: 15px; }
.mcq-timer-chip { background: rgba(239,68,68,.35); }
.mcq-timer-chip.urgent { background: rgba(239,68,68,.7); animation: mcqPulse 1s infinite; }
@keyframes mcqPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.04)} }

/* Difficulty badge */
.mcq-difficulty-easy   { background: rgba(16,185,129,.35); }
.mcq-difficulty-medium { background: rgba(245,158,11,.35); }
.mcq-difficulty-hard   { background: rgba(239,68,68,.35); }

/* ═══════════════════════════════════════════════
   PROGRESS BAR
═══════════════════════════════════════════════ */
.mcq-progress-wrap {
    display: flex; align-items: center; gap: 16px;
    padding: 16px 44px; background: var(--mcq-white);
    border-bottom: 1px solid var(--mcq-border);
}
.mcq-progress-bar {
    flex: 1; height: 10px; background: #EDE9FE; border-radius: 20px; overflow: hidden;
}
.mcq-progress-fill {
    height: 100%; border-radius: 20px;
    background: linear-gradient(90deg, var(--mcq-c1), var(--mcq-c3));
    transition: width .5s cubic-bezier(.4,0,.2,1);
    position: relative; overflow: hidden;
}
.mcq-progress-fill::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
    animation: mcqShimmer 2s infinite;
}
@keyframes mcqShimmer { 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }
.mcq-progress-label { font-size: 13px; font-weight: 700; color: var(--mcq-c1); white-space: nowrap; }

/* ═══════════════════════════════════════════════
   QUESTION CARD
═══════════════════════════════════════════════ */
.mcq-questions-wrapper { padding: 36px 44px; background: var(--mcq-white); min-height: 320px; }
.mcq-question-slide { display: none; }
.mcq-question-slide.active { display: block; animation: mcqSlideIn .38s cubic-bezier(.25,.46,.45,.94); }
.mcq-question-slide.slide-left.active { animation: mcqSlideInLeft .38s cubic-bezier(.25,.46,.45,.94); }
@keyframes mcqSlideIn     { from{opacity:0;transform:translateX(30px)} to{opacity:1;transform:none} }
@keyframes mcqSlideInLeft { from{opacity:0;transform:translateX(-30px)} to{opacity:1;transform:none} }

.mcq-question-card { position: relative; }
.mcq-q-header { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 24px; }
.mcq-q-number-badge {
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 42px; height: 42px; border-radius: 12px;
    background: linear-gradient(135deg, var(--mcq-c1), var(--mcq-c2));
    color: #fff; font-family: 'Sora', sans-serif;
    font-size: 15px; font-weight: 800;
    box-shadow: 0 4px 14px rgba(124,58,237,.35);
}
.mcq-q-points-badge {
    flex-shrink: 0; align-self: flex-start;
    display: inline-flex; align-items: center; gap: 4px;
    background: #FFF7ED; border: 1.5px solid #FED7AA;
    border-radius: 20px; padding: 4px 12px;
    font-size: 12px; font-weight: 700; color: #C2410C;
    margin-left: auto;
}
.mcq-question-text {
    font-family: 'Sora', sans-serif;
    font-size: 19px; font-weight: 700;
    color: var(--mcq-text); line-height: 1.55;
    flex: 1;
}

/* ═══════════════════════════════════════════════
   OPTIONS
═══════════════════════════════════════════════ */
.mcq-options-grid { display: grid; gap: 13px; }
.mcq-option {
    display: flex; align-items: center; gap: 14px;
    padding: 17px 22px; border-radius: 16px;
    border: 2px solid var(--mcq-border); background: var(--mcq-bg);
    cursor: pointer; transition: all .22s cubic-bezier(.25,.46,.45,.94);
    position: relative; overflow: hidden; user-select: none;
}
.mcq-option::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg, var(--mcq-c1), var(--mcq-c2));
    opacity: 0; transition: opacity .22s;
}
.mcq-option:hover { border-color: var(--mcq-c2); transform: translateX(5px); box-shadow: 0 4px 20px rgba(124,58,237,.12); }
.mcq-option:hover::before { opacity: .04; }
.mcq-option input[type=radio] { display: none; }
.mcq-option-label {
    flex-shrink: 0; width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px; background: rgba(124,58,237,.1);
    color: var(--mcq-c1); font-family: 'Sora',sans-serif;
    font-size: 13px; font-weight: 800;
    transition: all .22s; position: relative; z-index: 1;
}
.mcq-option-text {
    flex: 1; font-size: 15px; font-weight: 500;
    color: var(--mcq-text); line-height: 1.4;
    position: relative; z-index: 1;
}
.mcq-option-check {
    flex-shrink: 0; width: 24px; height: 24px;
    border-radius: 50%; border: 2px solid var(--mcq-border);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; color: transparent;
    transition: all .22s; position: relative; z-index: 1;
}
.mcq-option.selected {
    border-color: var(--mcq-c1);
    background: linear-gradient(135deg, rgba(124,58,237,.06), rgba(167,139,250,.08));
    box-shadow: 0 6px 24px rgba(124,58,237,.18);
    transform: translateX(5px);
}
.mcq-option.selected .mcq-option-label {
    background: var(--mcq-c1); color: #fff;
    box-shadow: 0 4px 12px rgba(124,58,237,.4);
}
.mcq-option.selected .mcq-option-check {
    background: var(--mcq-c1); border-color: var(--mcq-c1);
    color: #fff;
}
/* After submit states */
.mcq-option.correct  { border-color: var(--mcq-ok); background: rgba(16,185,129,.07); pointer-events:none; }
.mcq-option.wrong    { border-color: var(--mcq-err); background: rgba(239,68,68,.07); pointer-events:none; animation: mcqShake .4s; }
.mcq-option.disabled { pointer-events: none; opacity: .6; }
@keyframes mcqShake {
    0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)}
}
.mcq-option.correct .mcq-option-label  { background: var(--mcq-ok);  color: #fff; }
.mcq-option.wrong   .mcq-option-label  { background: var(--mcq-err); color: #fff; }

/* ═══════════════════════════════════════════════
   NAVIGATION
═══════════════════════════════════════════════ */
.mcq-nav-wrap {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 44px; background: var(--mcq-white);
    border-top: 1px solid var(--mcq-border); gap: 12px;
    flex-wrap: wrap;
}
.mcq-nav-btn {
    padding: 12px 28px; border-radius: 14px;
    font-size: 14px; font-weight: 700; font-family: 'DM Sans', sans-serif;
    border: 2px solid transparent; cursor: pointer;
    transition: all .22s; letter-spacing: .2px;
}
.mcq-prev-btn {
    background: var(--mcq-bg); color: var(--mcq-muted);
    border-color: var(--mcq-border);
}
.mcq-prev-btn:hover:not(:disabled) { border-color: var(--mcq-c2); color: var(--mcq-c1); }
.mcq-prev-btn:disabled { opacity: .35; cursor: not-allowed; }
.mcq-next-btn {
    background: linear-gradient(135deg, var(--mcq-c1), var(--mcq-c2));
    color: #fff; box-shadow: 0 6px 20px rgba(124,58,237,.35);
}
.mcq-next-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(124,58,237,.45); }
.mcq-submit-btn {
    background: linear-gradient(135deg, #059669, #10B981);
    color: #fff; box-shadow: 0 6px 20px rgba(16,185,129,.35);
    padding: 13px 32px;
}
.mcq-submit-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(16,185,129,.45); }
.mcq-dot-nav { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; justify-content: center; max-width: 240px; }
.mcq-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--mcq-border); cursor: pointer;
    transition: all .22s;
}
.mcq-dot.active   { background: var(--mcq-c1); transform: scale(1.3); }
.mcq-dot.answered { background: rgba(124,58,237,.4); }
.mcq-dot.active.answered { background: var(--mcq-c1); }

/* ═══════════════════════════════════════════════
   BOTTOM STATUS BAR
═══════════════════════════════════════════════ */
.mcq-answered-bar {
    text-align: center;
    padding: 14px 44px;
    font-size: 13px; font-weight: 600; color: var(--mcq-muted);
    background: var(--mcq-bg); border-top: 1px solid var(--mcq-border);
}
.mcq-answered-bar span { color: var(--mcq-c1); font-weight: 800; }

/* ═══════════════════════════════════════════════
   LOADING
═══════════════════════════════════════════════ */
.mcq-loading {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; padding: 80px 40px; gap: 20px;
    background: var(--mcq-white);
}
.mcq-spinner {
    width: 52px; height: 52px; border-radius: 50%;
    border: 4px solid var(--mcq-border);
    border-top-color: var(--mcq-c1);
    animation: mcqSpin 0.7s linear infinite;
}
@keyframes mcqSpin { to { transform: rotate(360deg); } }
.mcq-loading p { font-size: 15px; font-weight: 600; color: var(--mcq-muted); }

/* ═══════════════════════════════════════════════
   RESULTS PANEL
═══════════════════════════════════════════════ */
.mcq-results-panel { background: var(--mcq-white); }
.mcq-result-hero {
    padding: 50px 44px 36px;
    text-align: center;
    position: relative; overflow: hidden;
}
.mcq-result-hero::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(124,58,237,.06) 0%, transparent 65%);
}
/* Score Ring */
.mcq-score-ring {
    position: relative; display: inline-block;
    width: 160px; height: 160px; margin-bottom: 24px;
    filter: drop-shadow(0 8px 24px rgba(124,58,237,.2));
}
.mcq-score-ring svg { transform: rotate(-90deg); width: 100%; height: 100%; }
.mcq-ring-bg   { fill: none; stroke: #EDE9FE; stroke-width: 10; }
.mcq-ring-fill {
    fill: none; stroke-width: 10;
    stroke-dasharray: 408;
    stroke-dashoffset: 408;
    stroke-linecap: round;
    transition: stroke-dashoffset 1.4s cubic-bezier(.25,.46,.45,.94);
}
.mcq-score-text {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
}
.mcq-score-text span {
    font-family: 'Sora', sans-serif;
    font-size: 42px; font-weight: 900; color: var(--mcq-text);
    line-height: 1;
}
.mcq-score-text small { font-size: 16px; font-weight: 700; color: var(--mcq-muted); }

/* Verdict */
.mcq-result-verdict {
    font-family: 'Sora', sans-serif;
    font-size: 26px; font-weight: 800; margin-bottom: 8px;
}
.mcq-result-verdict.pass { color: var(--mcq-ok); }
.mcq-result-verdict.fail { color: var(--mcq-err); }
.mcq-result-tagline { font-size: 15px; color: var(--mcq-muted); margin-bottom: 28px; }

/* Breakdown */
.mcq-result-breakdown {
    display: flex; align-items: center; justify-content: center;
    gap: 0; background: var(--mcq-bg); border-radius: 20px;
    border: 1px solid var(--mcq-border);
    padding: 20px 32px; margin: 0 auto 20px; max-width: 440px;
}
.mcq-rb-item { flex: 1; text-align: center; }
.mcq-rb-item span {
    display: block; font-family: 'Sora', sans-serif;
    font-size: 30px; font-weight: 900; color: var(--mcq-text);
}
.mcq-rb-item label { font-size: 12px; font-weight: 600; color: var(--mcq-muted); text-transform: uppercase; letter-spacing: .6px; }
.mcq-rb-sep { width: 1px; height: 50px; background: var(--mcq-border); margin: 0 8px; }

/* Points & Rank row */
.mcq-result-extras {
    display: flex; gap: 12px; justify-content: center;
    flex-wrap: wrap; margin-bottom: 16px;
}
.mcq-extra-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 20px; border-radius: 14px;
    font-size: 14px; font-weight: 700;
}
.mcq-extra-badge.points { background: #FFF7ED; color: #C2410C; border: 1.5px solid #FED7AA; }
.mcq-extra-badge.rank   { background: #EFF6FF; color: #1D4ED8; border: 1.5px solid #BFDBFE; }
.mcq-extra-badge.streak { background: #FDF4FF; color: #7E22CE; border: 1.5px solid #E9D5FF; }
.mcq-extra-badge.speed  { background: #F0FDF4; color: #065F46; border: 1.5px solid #A7F3D0; }

/* ═══════════════════════════════════════════════
   SHARE BAR
═══════════════════════════════════════════════ */
.mcq-share-bar {
    padding: 20px 44px; text-align: center;
    background: var(--mcq-bg); border-top: 1px solid var(--mcq-border);
}
.mcq-share-label { font-size: 13px; font-weight: 700; color: var(--mcq-muted); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 12px; }
.mcq-share-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.mcq-share-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 10px 20px; border-radius: 12px;
    font-size: 13px; font-weight: 700; cursor: pointer;
    border: none; transition: all .22s; font-family: 'DM Sans', sans-serif;
}
.mcq-share-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.15); }
.mcq-share-btn.whatsapp { background: #25D366; color: #fff; }
.mcq-share-btn.twitter  { background: #1DA1F2; color: #fff; }
.mcq-share-btn.copy     { background: var(--mcq-bg); color: var(--mcq-c1); border: 2px solid var(--mcq-border); }
.mcq-share-btn.copy.copied { background: var(--mcq-ok); color: #fff; border-color: var(--mcq-ok); }

/* ═══════════════════════════════════════════════
   LEADERBOARD
═══════════════════════════════════════════════ */
.mcq-leaderboard-section {
    padding: 32px 44px;
    border-top: 1px solid var(--mcq-border);
}
.mcq-section-title {
    font-family: 'Sora', sans-serif;
    font-size: 18px; font-weight: 800; color: var(--mcq-text);
    margin: 0 0 20px; display: flex; align-items: center; gap: 10px;
}
.mcq-lb-table { width: 100%; border-collapse: collapse; }
.mcq-lb-table th {
    text-align: left; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .6px; color: var(--mcq-muted);
    padding: 0 12px 12px; border-bottom: 2px solid var(--mcq-border);
}
.mcq-lb-table td { padding: 13px 12px; border-bottom: 1px solid var(--mcq-border); font-size: 14px; }
.mcq-lb-table tr:last-child td { border-bottom: none; }
.mcq-lb-table tr:hover td { background: var(--mcq-bg); }
.mcq-lb-rank {
    font-family: 'Sora', sans-serif;
    font-size: 15px; font-weight: 900;
    width: 40px;
}
.mcq-lb-rank-1 { color: #F59E0B; }
.mcq-lb-rank-2 { color: #9CA3AF; }
.mcq-lb-rank-3 { color: #CD7F32; }
.mcq-lb-name   { font-weight: 600; color: var(--mcq-text); }
.mcq-lb-score  { font-family: 'Sora',sans-serif; font-weight: 800; color: var(--mcq-c1); }
.mcq-lb-medal  { font-size: 20px; }
.mcq-lb-loading { text-align: center; padding: 24px; color: var(--mcq-muted); font-size: 14px; }

/* ═══════════════════════════════════════════════
   CERTIFICATE
═══════════════════════════════════════════════ */
.mcq-certificate-section {
    padding: 0 44px 32px; text-align: center;
}
.mcq-cert-btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 36px; border-radius: 14px;
    background: linear-gradient(135deg, #F59E0B, #EF4444);
    color: #fff; font-size: 15px; font-weight: 700;
    border: none; cursor: pointer; font-family: 'DM Sans', sans-serif;
    box-shadow: 0 6px 24px rgba(245,158,11,.4);
    transition: all .22s;
}
.mcq-cert-btn:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(245,158,11,.5); }

/* Certificate modal */
.mcq-cert-modal-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.7); backdrop-filter: blur(6px);
    z-index: 99999; align-items: center; justify-content: center;
    padding: 20px;
}
.mcq-cert-modal-overlay.open { display: flex; }
.mcq-cert-modal {
    background: #fff; border-radius: 20px;
    max-width: 700px; width: 100%; max-height: 90vh;
    overflow-y: auto; box-shadow: 0 40px 100px rgba(0,0,0,.3);
    animation: mcqModalIn .35s cubic-bezier(.25,.46,.45,.94);
}
@keyframes mcqModalIn { from{opacity:0;transform:scale(.92)} to{opacity:1;transform:none} }
.mcq-cert-header {
    padding: 20px 24px; display: flex; align-items: center; justify-content: space-between;
    border-bottom: 1px solid #F3F4F6;
}
.mcq-cert-close {
    width: 36px; height: 36px; border-radius: 10px;
    background: #F3F4F6; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; transition: background .2s;
}
.mcq-cert-close:hover { background: #E5E7EB; }
#mcq-certificate-canvas {
    width: 100%; border-radius: 0 0 20px 20px;
    display: block;
}
.mcq-cert-actions {
    padding: 16px 24px; display: flex; gap: 10px; justify-content: center;
    border-top: 1px solid #F3F4F6;
}
.mcq-cert-download {
    padding: 10px 24px; border-radius: 10px;
    background: var(--mcq-c1); color: #fff;
    font-size: 14px; font-weight: 700; border: none; cursor: pointer;
    font-family: 'DM Sans', sans-serif;
}

/* ═══════════════════════════════════════════════
   ANSWER REVIEW
═══════════════════════════════════════════════ */
.mcq-review-section {
    padding: 32px 44px;
    border-top: 1px solid var(--mcq-border);
}
.mcq-review-item {
    padding: 20px; border-radius: 16px; margin-bottom: 14px;
    border: 2px solid; animation: mcqFadeUp .4s ease both;
}
@keyframes mcqFadeUp { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} }
.mcq-review-item.correct { border-color: rgba(16,185,129,.3); background: rgba(16,185,129,.04); }
.mcq-review-item.wrong   { border-color: rgba(239,68,68,.3);  background: rgba(239,68,68,.04); }
.mcq-review-status {
    font-size: 12px; font-weight: 800; text-transform: uppercase;
    letter-spacing: .6px; margin-bottom: 8px;
    display: flex; align-items: center; gap: 6px;
}
.correct .mcq-review-status { color: var(--mcq-ok); }
.wrong   .mcq-review-status { color: var(--mcq-err); }
.mcq-review-q {
    font-family: 'Sora', sans-serif;
    font-size: 15px; font-weight: 700; color: var(--mcq-text);
    margin-bottom: 14px; line-height: 1.4;
}
.mcq-review-ans { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.mcq-review-chip {
    padding: 6px 14px; border-radius: 30px;
    font-size: 13px; font-weight: 600;
    background: var(--mcq-bg); border: 1.5px solid var(--mcq-border);
    color: var(--mcq-muted);
}
.mcq-review-chip.correct     { background: rgba(16,185,129,.1); border-color: var(--mcq-ok); color: #065F46; }
.mcq-review-chip.wrong-chosen{ background: rgba(239,68,68,.1); border-color: var(--mcq-err); color: #7F1D1D; }
.mcq-review-chip.chosen      { background: rgba(124,58,237,.1); border-color: var(--mcq-c1); color: var(--mcq-c1); }
.mcq-review-explanation {
    font-size: 13px; color: var(--mcq-muted); line-height: 1.5;
    background: rgba(0,0,0,.03); border-radius: 10px; padding: 10px 14px;
    border-left: 3px solid var(--mcq-c2); margin-top: 8px;
}

/* ═══════════════════════════════════════════════
   RESULT ACTIONS
═══════════════════════════════════════════════ */
.mcq-result-actions {
    padding: 24px 44px; display: flex; gap: 12px;
    justify-content: center; flex-wrap: wrap;
    border-top: 1px solid var(--mcq-border);
}
.mcq-btn-result {
    padding: 13px 30px; border-radius: 14px;
    font-size: 14px; font-weight: 700; cursor: pointer;
    border: 2px solid transparent; font-family: 'DM Sans', sans-serif;
    transition: all .22s;
}
.mcq-retake {
    background: linear-gradient(135deg, var(--mcq-c1), var(--mcq-c2));
    color: #fff; box-shadow: 0 6px 20px rgba(124,58,237,.35);
}
.mcq-retake:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(124,58,237,.45); }

/* ═══════════════════════════════════════════════
   CONFETTI CANVAS
═══════════════════════════════════════════════ */
.mcq-confetti-canvas {
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none; z-index: 99998;
}

/* ═══════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════ */
@media (max-width: 640px) {
    .mcq-quiz-header    { padding: 28px 24px 22px; }
    .mcq-quiz-title     { font-size: 20px; }
    .mcq-questions-wrapper,
    .mcq-progress-wrap,
    .mcq-nav-wrap,
    .mcq-answered-bar,
    .mcq-result-hero,
    .mcq-review-section,
    .mcq-leaderboard-section,
    .mcq-share-bar,
    .mcq-certificate-section,
    .mcq-result-actions { padding-left: 20px; padding-right: 20px; }
    .mcq-question-text  { font-size: 16px; }
    .mcq-result-breakdown { flex-direction: column; gap: 16px; }
    .mcq-rb-sep { width: 80px; height: 1px; }
    .mcq-score-ring { width: 130px; height: 130px; }
    .mcq-score-text span { font-size: 34px; }
    .mcq-dot-nav { max-width: 180px; }
}

/* SVG defs helper */
.mcq-svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ══════════════════════════════════════════
   MCQ MASTER PRO v4.0 — ENHANCEMENT STYLES
   ══════════════════════════════════════════ */

/* ── Dark Mode ── */
.mcq-quiz-container.mcq-dark { --mcq-bg:#1a1a2e; --mcq-card:#16213E; --mcq-text:#E8E8F0; --mcq-border:#2d2d5e; }
.mcq-dark .mcq-question-card { background:#1E2140 !important; border-color:#3a3a6e !important; color:#E8E8F0 !important; }
.mcq-dark .mcq-quiz-header   { background:linear-gradient(135deg,#2d1b69,#4a1a4a) !important; }
.mcq-dark .mcq-option         { background:#252547 !important; border-color:#3a3a6e !important; color:#E8E8F0 !important; }
.mcq-dark .mcq-option:hover   { background:#2e2e60 !important; }
.mcq-dark .mcq-prestart-modal { background:#1E2140; color:#E8E8F0; }
.mcq-dark .mcq-pf-input       { background:#252547; border-color:#3a3a6e; color:#E8E8F0; }
.mcq-dark .mcq-results-panel  { background:#1a1a2e !important; }
.mcq-dark .mcq-review-item    { background:#1E2140 !important; border-color:#3a3a6e !important; }
.mcq-dark .mcq-lb-table th    { background:#2d1b69 !important; }
.mcq-dark .mcq-lb-table tr:nth-child(even) { background:#1E2140 !important; }

/* ── Floating Controls ── */
.mcq-dark-toggle, .mcq-sound-toggle {
    position:absolute; top:16px; right:56px;
    background:rgba(255,255,255,0.15);
    border:none; border-radius:50%; width:36px; height:36px;
    cursor:pointer; font-size:16px; transition:.2s; z-index:10;
    backdrop-filter:blur(8px);
}
.mcq-sound-toggle { right:16px; }
.mcq-dark-toggle:hover, .mcq-sound-toggle:hover { background:rgba(255,255,255,0.3); transform:scale(1.1); }
.mcq-quiz-container { position:relative; }

/* ── Pre-start Overlay ── */
.mcq-prestart-overlay {
    position:relative; z-index:20;
    display:flex; align-items:center; justify-content:center;
    min-height:320px; padding:20px;
}
.mcq-prestart-modal {
    background:#fff;
    border-radius:24px;
    padding:36px 32px;
    max-width:480px; width:100%;
    box-shadow:0 20px 60px rgba(124,58,237,.18), 0 4px 16px rgba(0,0,0,.08);
    text-align:center;
    animation:mcqModalIn .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes mcqModalIn { from{opacity:0;transform:scale(.88) translateY(20px)} to{opacity:1;transform:none} }
.mcq-overlay-exit .mcq-prestart-modal { animation:mcqModalOut .35s ease forwards; }
@keyframes mcqModalOut { to{opacity:0;transform:scale(.88) translateY(-20px)} }
.mcq-prestart-icon { font-size:52px; margin-bottom:8px; animation:mcqBounce 2s infinite; }
@keyframes mcqBounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.mcq-prestart-title { font-size:22px; font-weight:700; color:#1F2937; margin:0 0 8px; }
.mcq-prestart-desc  { color:#6B7280; font-size:14px; margin:0 0 16px; }
.mcq-prestart-meta  { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:20px; }
.mcq-pm-chip { background:linear-gradient(135deg,#F3F0FF,#FAF5FF); border:1px solid #DDD6FE;
    border-radius:20px; padding:6px 14px; font-size:12px; font-weight:600; color:#5B21B6; }
.mcq-diff-easy   { background:#ECFDF5; border-color:#6EE7B7; color:#059669; }
.mcq-diff-medium { background:#FFFBEB; border-color:#FCD34D; color:#D97706; }
.mcq-diff-hard   { background:#FEF2F2; border-color:#FCA5A5; color:#DC2626; }
.mcq-prestart-fields { margin-bottom:20px; text-align:left; }
.mcq-pf-group { margin-bottom:12px; }
.mcq-pf-label { display:block; font-size:12px; font-weight:600; color:#374151; margin-bottom:4px; }
.mcq-pf-input { width:100%; box-sizing:border-box; padding:10px 14px; border:2px solid #E5E7EB;
    border-radius:10px; font-size:14px; font-family:inherit; transition:.2s; outline:none; }
.mcq-pf-input:focus { border-color:#7C3AED; box-shadow:0 0 0 3px rgba(124,58,237,.12); }
.mcq-prestart-btn {
    background:linear-gradient(135deg,#7C3AED,#EC4899);
    color:#fff; border:none; border-radius:50px; padding:14px 36px;
    font-size:16px; font-weight:700; cursor:pointer; width:100%;
    display:flex; align-items:center; justify-content:center; gap:10px;
    transition:transform .15s, box-shadow .15s;
    box-shadow:0 8px 24px rgba(124,58,237,.35);
}
.mcq-prestart-btn:hover { transform:translateY(-2px); box-shadow:0 12px 30px rgba(124,58,237,.45); }
.mcq-btn-arrow { font-size:18px; transition:transform .2s; }
.mcq-prestart-btn:hover .mcq-btn-arrow { transform:translateX(4px); }
.mcq-prestart-note { font-size:11px; color:#9CA3AF; margin-top:12px; }

/* ── Quiz Body Enter ── */
.mcq-body-enter { animation:mcqBodyIn .45s ease; }
@keyframes mcqBodyIn { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} }

/* ── Streak Bar ── */
.mcq-streak-bar {
    display:flex; align-items:center; gap:8px; justify-content:center;
    background:linear-gradient(135deg,#FFF7ED,#FFFBEB);
    border:1px solid #FCD34D; border-radius:12px;
    padding:8px 16px; margin:8px 0; font-size:14px; font-weight:600; color:#92400E;
    animation:mcqPop .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes mcqPop { from{transform:scale(0.8);opacity:0} to{transform:scale(1);opacity:1} }
.mcq-streak-fire { font-size:20px; animation:mcqBounce 1.2s infinite; }

/* ── Bookmark Button ── */
.mcq-bookmark-btn {
    position:absolute; top:12px; right:12px;
    background:rgba(124,58,237,.08); border:1px solid rgba(124,58,237,.15);
    border-radius:8px; padding:4px 8px; cursor:pointer; font-size:14px;
    transition:.2s; z-index:2;
}
.mcq-bookmark-btn:hover  { background:rgba(124,58,237,.15); transform:scale(1.05); }
.mcq-bookmark-btn.mcq-bookmarked { background:#FEF3C7; border-color:#F59E0B; }
.mcq-question-card { position:relative; }

/* ── Confidence Meter ── */
.mcq-confidence-wrap { display:flex; align-items:center; gap:10px; margin:12px 0 4px; flex-wrap:wrap; }
.mcq-conf-label { font-size:12px; font-weight:600; color:#6B7280; }
.mcq-conf-btns  { display:flex; gap:6px; }
.mcq-conf-btn {
    border:1px solid #E5E7EB; background:#F9FAFB; border-radius:20px;
    padding:4px 12px; font-size:11px; cursor:pointer; transition:.15s;
    font-family:inherit;
}
.mcq-conf-btn:hover { border-color:#7C3AED; background:#F3F0FF; }
.mcq-conf-btn.active { background:linear-gradient(135deg,#7C3AED,#A78BFA); color:#fff; border-color:transparent; }

/* ── Option Ripple ── */
.mcq-option { overflow:hidden; }
.mcq-option-ripple {
    position:absolute; inset:0; background:radial-gradient(circle, rgba(124,58,237,.18) 0%, transparent 70%);
    opacity:0; transform:scale(0); border-radius:inherit; pointer-events:none; transition:none;
}
.mcq-option-ripple.active { animation:mcqRipple .6s ease; }
@keyframes mcqRipple { 0%{opacity:1;transform:scale(0)} 100%{opacity:0;transform:scale(1)} }
.mcq-option-pulse { animation:mcqOptionPulse .4s ease; }
@keyframes mcqOptionPulse { 0%{box-shadow:0 0 0 0 rgba(124,58,237,.4)} 100%{box-shadow:0 0 0 12px rgba(124,58,237,0)} }

/* ── Hint ── */
.mcq-hint-wrap { margin-top:10px; }
.mcq-hint-btn {
    background:none; border:1px dashed #A78BFA; color:#7C3AED; border-radius:8px;
    padding:5px 12px; font-size:12px; cursor:pointer; font-family:inherit; transition:.15s;
}
.mcq-hint-btn:hover { background:#F3F0FF; }
.mcq-hint-text {
    background:#F5F3FF; border-left:3px solid #7C3AED; border-radius:0 8px 8px 0;
    padding:10px 14px; margin-top:8px; font-size:13px; color:#5B21B6; font-style:italic;
}

/* ── Status Bar ── */
.mcq-status-bar {
    display:flex; align-items:center; justify-content:space-between;
    padding:8px 0; font-size:13px; color:#6B7280;
}
.mcq-bookmarks-btn {
    background:#FEF3C7; border:1px solid #F59E0B; color:#92400E;
    border-radius:20px; padding:4px 12px; font-size:12px; cursor:pointer;
    font-family:inherit; font-weight:600; transition:.15s;
}
.mcq-bookmarks-btn:hover { background:#FDE68A; }

/* ── Bookmarks Panel ── */
.mcq-bookmarks-panel {
    background:#FFFBEB; border:1px solid #FCD34D; border-radius:12px;
    padding:16px; margin:8px 0;
}
.mcq-bm-title { font-size:14px; font-weight:700; margin:0 0 10px; color:#92400E; }
.mcq-bm-item {
    padding:8px 12px; border-radius:8px; cursor:pointer; font-size:13px;
    transition:.15s; display:flex; gap:8px; align-items:flex-start;
}
.mcq-bm-item:hover { background:#FDE68A; }
.mcq-bm-num { font-weight:700; color:#D97706; min-width:24px; }
.mcq-bm-txt { color:#374151; }
.mcq-bm-close {
    background:none; border:1px solid #FCD34D; color:#92400E; border-radius:8px;
    padding:5px 12px; font-size:12px; cursor:pointer; margin-top:8px; font-family:inherit;
}

/* ── Dot colors ── */
.mcq-dot-answered { background:linear-gradient(135deg,#7C3AED,#A78BFA) !important; }
.mcq-dot-bookmarked { box-shadow:0 0 0 2px #F59E0B !important; }

/* ── Timer states ── */
.mcq-timer-warn     { color:#F59E0B; animation:mcqTimerPulse 1s infinite; }
.mcq-timer-critical { color:#EF4444; animation:mcqTimerPulse .5s infinite; }
@keyframes mcqTimerPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.2)} }

/* ── Live XP chip ── */
.mcq-xp-chip { background:linear-gradient(135deg,#FFF7ED,#FFFBEB); border-color:#FCD34D; color:#92400E; }

/* ── Spinner enhanced ── */
.mcq-spinner-wrap { position:relative; display:inline-block; margin-bottom:16px; }
.mcq-spinner-ring {
    position:absolute; inset:-8px; border-radius:50%;
    border:3px solid transparent;
    border-top-color:rgba(124,58,237,.25);
    animation:mcqSpin 1.5s linear infinite reverse;
}
@keyframes mcqSpin { to{transform:rotate(360deg)} }
.mcq-loading-tips {
    max-width:320px; margin:12px auto 0;
    background:rgba(124,58,237,.07); border-radius:10px;
    padding:10px 14px; font-size:12px; color:#5B21B6; font-style:italic; text-align:center;
}

/* ── Achievement Badges Popup ── */
.mcq-badges-popup {
    position:fixed; top:24px; right:24px; z-index:9999;
    background:linear-gradient(135deg,#4F1D96,#7C3AED);
    border-radius:20px; padding:20px 24px; max-width:280px;
    box-shadow:0 20px 60px rgba(124,58,237,.4);
    color:#fff; transform:translateX(120%); transition:.5s cubic-bezier(.34,1.56,.64,1);
}
.mcq-badges-popup.mcq-badges-in { transform:translateX(0); }
.mcq-badges-title { margin:0 0 12px; font-size:14px; font-weight:700; text-align:center; }
.mcq-badges-inner { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.mcq-badge-item {
    background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.2);
    border-radius:12px; padding:8px 12px; text-align:center;
    animation:mcqBadgeIn .5s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes mcqBadgeIn { from{transform:scale(0) rotate(-15deg);opacity:0} to{transform:none;opacity:1} }
.mcq-badge-icon  { font-size:24px; }
.mcq-badge-label { font-size:10px; font-weight:600; margin-top:2px; }

/* ── XP Bar ── */
.mcq-xp-bar-wrap { margin:20px auto; max-width:380px; text-align:left; }
.mcq-xp-bar-label { display:flex; justify-content:space-between; font-size:12px; font-weight:600; color:#374151; margin-bottom:6px; }
.mcq-xp-bar-track { background:#E5E7EB; border-radius:999px; height:14px; overflow:hidden; }
.mcq-xp-bar-fill {
    height:100%; border-radius:999px;
    background:linear-gradient(90deg,#7C3AED,#EC4899,#F59E0B);
    background-size:200% 100%;
    animation:mcqXpShimmer 2s linear infinite;
    transition:width 1.2s cubic-bezier(.34,1.56,.64,1);
}
@keyframes mcqXpShimmer { 0%{background-position:0% 0%} 100%{background-position:200% 0%} }
.mcq-xp-bar-next { font-size:11px; color:#9CA3AF; text-align:right; margin-top:4px; }

/* ── Radar Chart section ── */
.mcq-stats-section { margin:24px 0; text-align:center; }
#mcq-radar-chart { max-width:300px; display:inline-block; }

/* ── Review filters ── */
.mcq-review-filters { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.mcq-rf-btn {
    border:1px solid #E5E7EB; background:#F9FAFB; border-radius:20px;
    padding:5px 14px; font-size:12px; cursor:pointer; font-family:inherit;
    font-weight:600; color:#374151; transition:.15s;
}
.mcq-rf-btn:hover  { border-color:#7C3AED; background:#F3F0FF; }
.mcq-rf-btn.active { background:linear-gradient(135deg,#7C3AED,#A78BFA); color:#fff; border-color:transparent; }

/* ── Confidence badge in review ── */
.mcq-conf-badge {
    display:inline-block; border-radius:20px; padding:2px 10px;
    font-size:10px; font-weight:700; margin-bottom:6px;
}
.mcq-conf-low  { background:#FEF3C7; color:#92400E; }
.mcq-conf-med  { background:#DBEAFE; color:#1D4ED8; }
.mcq-conf-high { background:#D1FAE5; color:#065F46; }

/* ── Leaderboard Streak column ── */
.mcq-lb-table th:last-child, .mcq-lb-table td:last-child { text-align:center; }

/* ── Float particle ── */
.mcq-float-particle {
    position:fixed; font-weight:700; font-size:18px; pointer-events:none;
    z-index:9999; text-shadow:0 2px 4px rgba(0,0,0,.15);
}

/* ── Print ── */
.mcq-btn-result.mcq-print {
    background:linear-gradient(135deg,#374151,#6B7280);
    border-color:transparent; color:#fff;
}
.mcq-btn-result.mcq-print:hover { background:linear-gradient(135deg,#1F2937,#374151); }
@media print {
    .mcq-prestart-overlay,.mcq-quiz-header,.mcq-progress-wrap,.mcq-nav-wrap,
    .mcq-status-bar,.mcq-share-bar,.mcq-result-actions,.mcq-certificate-section,
    .mcq-dark-toggle,.mcq-sound-toggle,.mcq-badges-popup,.mcq-bookmarks-panel { display:none !important; }
    .mcq-results-panel { display:block !important; box-shadow:none; }
}

/* ── Facebook share btn ── */
.mcq-share-btn.facebook { background:linear-gradient(135deg,#1877F2,#0D6EFD); }
.mcq-share-btn.facebook:hover { background:linear-gradient(135deg,#0D6EFD,#0A58CA); }

/* ── Responsive tweaks ── */
@media(max-width:480px){
    .mcq-prestart-modal { padding:24px 18px; }
    .mcq-badges-popup   { right:12px; top:12px; max-width:240px; }
    .mcq-dark-toggle, .mcq-sound-toggle { width:30px; height:30px; font-size:13px; top:12px; }
    .mcq-sound-toggle { right:12px; }
    .mcq-dark-toggle  { right:48px; }
    .mcq-conf-btns    { flex-wrap:wrap; }
}