/* Quiz Master v3 — All-Modal Layout */
*,*::before,*::after{box-sizing:border-box}

.qm-wrap{max-width:840px;margin:0 auto 40px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;color:#2d3748}

/* ── SETS NAV ── */
.qm-sets-nav{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:18px 20px;margin-bottom:20px;box-shadow:0 1px 4px rgba(0,0,0,.06)}
.qm-sets-header{display:flex;justify-content:space-between;align-items:center;font-weight:600;margin-bottom:14px}
.qm-toggle-sets{background:#3182ce;color:#fff;border:none;border-radius:6px;padding:5px 14px;cursor:pointer;font-size:13px}
.qm-toggle-sets:hover{background:#2b6cb0}
.qm-sets-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.qm-set-card{display:block;text-decoration:none;border:2px solid #e2e8f0;border-radius:8px;padding:12px 14px;color:#2d3748;transition:all .2s;position:relative}
.qm-set-card:hover{border-color:#3182ce;background:#ebf8ff;color:#2b6cb0}
.qm-set-card.current{border-color:#38a169;background:#f0fff4}
.qm-set-num{display:block;font-size:13px;font-weight:700;color:#3182ce}
.qm-set-card.current .qm-set-num{color:#38a169}
.qm-set-title{display:block;font-size:12px;color:#718096;margin-top:2px}
.qm-set-badge{position:absolute;top:8px;right:8px;background:#38a169;color:#fff;font-size:10px;border-radius:4px;padding:2px 7px}

/* ── CLOSE BUTTON ── */
.qm-close-btn{
    position:absolute;top:14px;right:14px;
    width:32px;height:32px;
    border:none;border-radius:50%;
    background:#f1f5f9;color:#64748b;
    font-size:15px;font-weight:700;
    cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:all .2s;
    line-height:1;
    z-index:10;
}
.qm-close-btn:hover{background:#e2e8f0;color:#1a202c;transform:scale(1.1)}

/* quiz modal close sits inside header-right */
.qm-header-right{display:flex;align-items:center;gap:10px}
.qm-modal-quiz .qm-close-btn{position:static;top:auto;right:auto;flex-shrink:0}

/* ── OVERLAY ── */
.qm-overlay{
    position:fixed;inset:0;
    background:rgba(15,23,42,.70);
    backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
    z-index:99999;
    display:flex;align-items:center;justify-content:center;
    padding:12px;
    animation:qmFadeIn .25s ease;
}
@keyframes qmFadeIn{from{opacity:0}to{opacity:1}}

/* ── BASE MODAL ── */
.qm-modal{
    background:#fff;border-radius:20px;
    width:100%;max-width:500px;
    max-height:92vh;overflow-y:auto;
    box-shadow:0 24px 64px rgba(0,0,0,.30);
    animation:qmUp .28s ease;
    position:relative;
    scrollbar-width:thin;
}
@keyframes qmUp{from{transform:translateY(28px);opacity:0}to{transform:translateY(0);opacity:1}}

/* ── START MODAL ── */
.qm-modal-start{padding:40px 32px;text-align:center}
.qm-modal-icon{font-size:54px;margin-bottom:10px;line-height:1}
.qm-modal-start h2{font-size:22px;margin:0 0 4px;color:#1a202c}
.qm-modal-sub{color:#718096;font-size:15px;margin:0 0 22px}
.qm-info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:22px}
.qm-info-box{background:#f7fafc;border:1px solid #e2e8f0;border-radius:10px;padding:14px 8px;display:flex;flex-direction:column;align-items:center;gap:4px}
.qm-info-icon{font-size:20px}
.qm-info-val{font-size:22px;font-weight:800;color:#1a202c;line-height:1}
.qm-info-lbl{font-size:11px;color:#718096;font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.qm-rules{list-style:none;padding:14px 16px;margin:0 0 26px;background:#f7fafc;border-radius:10px;text-align:left}
.qm-rules li{font-size:14px;color:#4a5568;padding:5px 0;border-bottom:1px solid #e2e8f0}
.qm-rules li:last-child{border-bottom:none}

/* ── QUIZ MODAL (wider) ── */
.qm-modal-quiz{max-width:640px;padding:0;display:flex;flex-direction:column}
.qm-quiz-header{padding:18px 24px 14px;border-bottom:1px solid #e2e8f0;position:sticky;top:0;background:#fff;z-index:10;border-radius:20px 20px 0 0}
.qm-progress-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.qm-q-counter{font-size:14px;color:#4a5568}
.qm-timer{font-size:14px;font-weight:700;color:#e53e3e;background:#fff5f5;border-radius:6px;padding:3px 10px}
.qm-timer.warning{animation:qmPulse .8s infinite}
@keyframes qmPulse{0%,100%{opacity:1}50%{opacity:.35}}
.qm-progress-bar{height:5px;background:#e2e8f0;border-radius:10px;overflow:hidden;margin-bottom:10px}
.qm-progress-fill{height:100%;background:linear-gradient(90deg,#3182ce,#63b3ed);border-radius:10px;transition:width .4s ease}
.qm-dots{display:flex;flex-wrap:wrap;gap:5px}
.qm-dot{width:11px;height:11px;border-radius:50%;background:#e2e8f0;cursor:pointer;transition:all .2s;display:inline-block}
.qm-dot.active{background:#3182ce;transform:scale(1.3)}
.qm-dot.answered{background:#63b3ed}
.qm-dot.correct{background:#38a169}
.qm-dot.wrong{background:#e53e3e}

/* Questions area inside quiz modal */
.qm-questions{padding:20px 24px 24px;flex:1}
.qm-question{display:none}
.qm-question.active{display:block;animation:qmFadeIn .2s ease}
.qm-q-badge{display:inline-flex;align-items:center;gap:4px;background:#3182ce;color:#fff;border-radius:6px;padding:3px 12px;font-size:13px;font-weight:700;margin-bottom:14px}
.qm-q-of{font-weight:400;opacity:.8}
.qm-q-image{margin-bottom:14px}
.qm-q-image img{max-width:100%;border-radius:8px;border:1px solid #e2e8f0;display:block}
.qm-q-text{font-size:16px;line-height:1.7;color:#1a202c;margin-bottom:20px;font-weight:500;word-break:break-word}
.qm-options{display:flex;flex-direction:column;gap:9px;margin-bottom:22px}
.qm-option{display:flex;align-items:center;gap:12px;padding:12px 15px;border:2px solid #e2e8f0;border-radius:10px;cursor:pointer;transition:all .2s;user-select:none}
.qm-option:hover{border-color:#3182ce;background:#ebf8ff}
.qm-option.selected{border-color:#3182ce;background:#ebf8ff}
.qm-option.correct{border-color:#38a169;background:#f0fff4}
.qm-option.wrong{border-color:#e53e3e;background:#fff5f5}
.qm-opt-key{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;min-width:30px;border-radius:50%;background:#edf2f7;font-weight:700;font-size:13px;color:#2d3748;transition:all .2s}
.qm-option.selected .qm-opt-key{background:#3182ce;color:#fff}
.qm-option.correct  .qm-opt-key{background:#38a169;color:#fff}
.qm-option.wrong    .qm-opt-key{background:#e53e3e;color:#fff}
.qm-opt-text{font-size:14px;color:#2d3748;flex:1}
.qm-nav{display:flex;justify-content:space-between;align-items:center;padding-top:4px}

/* ── RESULT MODAL ── */
.qm-modal-result{max-width:500px;padding:32px 28px;text-align:center}
.qm-score-ring{position:relative;width:120px;height:120px;margin:0 auto 16px}
.qm-score-ring svg{transform:rotate(-90deg);width:100%;height:100%}
.qm-ring-bg{fill:none;stroke:#e2e8f0;stroke-width:10}
.qm-ring-fill{fill:none;stroke:#3182ce;stroke-width:10;stroke-linecap:round;stroke-dasharray:314;stroke-dashoffset:314;transition:stroke-dashoffset 1.1s ease}
.qm-ring-text{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.qm-score-num{font-size:32px;font-weight:800;color:#1a202c;line-height:1}
.qm-score-denom{font-size:14px;color:#718096}
.qm-result-title{font-size:21px;margin:0 0 6px;color:#1a202c}
.qm-result-pct{font-size:18px;font-weight:700;color:#3182ce;margin:0 0 3px}
.qm-result-grade{font-size:14px;color:#718096;margin:0 0 20px}
.qm-tabs{display:flex;gap:8px;justify-content:center;margin-bottom:16px}
.qm-tab{padding:7px 18px;border:2px solid #e2e8f0;border-radius:20px;background:#fff;font-size:13px;font-weight:600;cursor:pointer;color:#718096;transition:all .2s}
.qm-tab.active,.qm-tab:hover{border-color:#3182ce;background:#3182ce;color:#fff}
.qm-summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:4px}
.qm-sum-box{border-radius:10px;padding:14px 8px;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;font-weight:600;text-transform:uppercase;color:#718096;letter-spacing:.4px}
.correct-box{background:#f0fff4;border:1px solid #9ae6b4}
.wrong-box{background:#fff5f5;border:1px solid #feb2b2}
.skip-box{background:#fffaf0;border:1px solid #fbd38d}
.qm-sum-val{font-size:26px;font-weight:800;color:#1a202c;line-height:1}
.qm-review-list{text-align:left;max-height:260px;overflow-y:auto;padding-right:2px}
.qm-review-item{border:1px solid #e2e8f0;border-radius:8px;padding:10px 13px;margin-bottom:7px;font-size:13px}
.qm-review-item.ri-correct{border-color:#9ae6b4;background:#f0fff4}
.qm-review-item.ri-wrong{border-color:#feb2b2;background:#fff5f5}
.qm-ri-q{font-weight:600;color:#2d3748;margin-bottom:4px}
.qm-ri-ans{color:#4a5568}
.qm-ri-ans span{font-weight:700}
.qm-result-btns{display:flex;gap:10px;justify-content:center;margin:20px 0 0}
.qm-result-sets{margin-top:18px;border-top:1px solid #e2e8f0;padding-top:14px}
.qm-try-more{font-size:13px;color:#718096;margin:0 0 10px}

/* ── BUTTONS ── */
.qm-btn{display:inline-flex;align-items:center;gap:6px;padding:10px 22px;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;text-decoration:none}
.qm-btn-start{background:linear-gradient(135deg,#3182ce,#63b3ed);color:#fff;font-size:16px;padding:14px 40px;border-radius:10px;box-shadow:0 4px 14px rgba(49,130,206,.35)}
.qm-btn-start:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(49,130,206,.45)}
.qm-btn-prev{background:#edf2f7;color:#4a5568}
.qm-btn-prev:hover{background:#e2e8f0}
.qm-btn-next{background:#3182ce;color:#fff}
.qm-btn-next:hover{background:#2b6cb0}
.qm-btn-submit{background:#38a169;color:#fff}
.qm-btn-submit:hover{background:#2f855a}
.qm-btn-retry{background:#3182ce;color:#fff}
.qm-btn-retry:hover{background:#2b6cb0}
.qm-btn-close-result{background:#edf2f7;color:#4a5568}
.qm-btn-close-result:hover{background:#e2e8f0}

/* ── RESPONSIVE ── */
@media(max-width:600px){
    .qm-modal-start{padding:26px 18px}
    .qm-modal-quiz .qm-quiz-header{padding:14px 16px 10px}
    .qm-questions{padding:16px 16px 20px}
    .qm-q-text{font-size:15px}
    .qm-sets-grid{grid-template-columns:repeat(2,1fr)}
    .qm-modal-result{padding:24px 16px}
    .qm-result-btns{flex-direction:column}
    .qm-info-grid{gap:8px}
    .qm-info-val{font-size:18px}
}