.quiz-page{background:#fff;min-height:100vh}.quiz-container{max-width:1100px;margin:0 auto;padding:24px 16px 48px}.quiz-main-title{color:#111827;letter-spacing:-.02em;margin:0 0 8px;font-size:28px;font-weight:900}.quiz-main-subtitle{color:#4b5563;max-width:600px;margin:0;font-size:15px;font-weight:600;line-height:1.7}.quiz-detail-header{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:20px;display:flex}.quiz-back-btn{color:#2563eb;background:0 0;border:2px solid #2563eb;border-radius:12px;align-items:center;gap:6px;padding:10px 14px;font-size:14px;font-weight:800;text-decoration:none;transition:background .2s;display:inline-flex}.quiz-back-btn:hover{background:#2563eb14}.quiz-card{background:#fff;border:2px solid #e5e7eb;border-radius:18px;padding:20px}.quiz-card-title{color:#111827;margin:0 0 14px;font-size:18px;font-weight:900}.quiz-steps-nav{flex-wrap:wrap;gap:10px;margin-bottom:20px;display:flex}.quiz-step-btn{color:#374151;cursor:pointer;background:#f3f4f6;border:2px solid #e5e7eb;border-radius:999px;padding:8px 14px;font-size:13px;font-weight:800;transition:all .2s}.quiz-step-btn:hover:not(:disabled){color:#2563eb;border-color:#2563eb}.quiz-step-btn.active{color:#2563eb;background:#2563eb1a;border-color:#2563eb}.quiz-step-btn:disabled{opacity:.5;cursor:not-allowed}.quiz-question{background:#f9fafb;border:2px solid #e5e7eb;border-radius:14px;margin-bottom:14px;padding:16px}.quiz-question-text{color:#111827;margin:0 0 12px;font-size:15px;font-weight:800;line-height:1.5}.quiz-options{gap:10px;display:grid}.quiz-option-btn{text-align:left;color:#374151;cursor:pointer;background:#fff;border:2px solid #e5e7eb;border-radius:12px;width:100%;padding:12px 14px;font-size:14px;font-weight:700;transition:all .2s}.quiz-option-btn:hover:not(:disabled){background:#eff6ff;border-color:#93c5fd}.quiz-option-btn.selected{color:#1d4ed8;background:#2563eb1a;border-color:#2563eb}.quiz-option-btn.correct{color:#166534;background:#dcfce7;border-color:#22c55e}.quiz-option-btn.wrong{color:#dc2626;background:#fef2f2;border-color:#ef4444}.quiz-correct-label{color:#16a34a;margin-left:8px;font-size:12px;font-weight:900}.quiz-wrong-label{color:#dc2626;margin-left:8px;font-size:12px;font-weight:900}.quiz-option-btn:disabled{cursor:not-allowed;opacity:.85}.quiz-actions{flex-wrap:wrap;align-items:center;gap:12px;margin-top:18px;display:flex}.quiz-submit-btn{color:#fff;cursor:pointer;background:#2563eb;border:2px solid #2563eb;border-radius:12px;padding:12px 20px;font-size:14px;font-weight:900;transition:background .2s}.quiz-submit-btn:hover:not(:disabled){background:#1d4ed8}.quiz-submit-btn:disabled{opacity:.6;cursor:not-allowed}.quiz-next-btn{color:#2563eb;cursor:pointer;background:0 0;border:2px solid #2563eb;border-radius:12px;padding:12px 20px;font-size:14px;font-weight:900;transition:background .2s}.quiz-next-btn:hover{background:#2563eb14}.quiz-hint{color:#9ca3af;font-size:13px;font-weight:700}.quiz-score{color:#1e40af;background:#2563eb0f;border:2px solid #2563eb33;border-radius:14px;margin-top:16px;padding:14px;font-size:16px;font-weight:900}.quiz-coming-soon{text-align:center;color:#6b7280;padding:40px 20px;font-weight:700}@media (max-width:600px){.quiz-detail-header{flex-direction:column}}.qr-wrapper{background:#fff;min-height:100vh;padding:20px}.qr-container{max-width:900px;margin:0 auto}.qr-header{margin-bottom:32px;animation:.4s ease-out qr-fade-in}.qr-back-button{color:#1e40af;cursor:pointer;background:#fff;border:2px solid #1e40af;border-radius:10px;align-items:center;gap:8px;margin-bottom:20px;padding:10px 18px;font-size:14px;font-weight:600;transition:all .2s;display:inline-flex}.qr-back-button:hover{color:#fff;background:#1e40af;transform:translate(-2px)}.qr-title-section{animation:.5s ease-out qr-slide-up}.qr-main-title{color:#000;letter-spacing:-.02em;margin:0 0 8px;font-size:32px;font-weight:800}.qr-subtitle{color:#6b7280;margin:0;font-size:16px;font-weight:500}.qr-quiz-card{background:#fff;border:2px solid #e5e7eb;border-radius:16px;padding:28px;animation:.4s ease-out qr-scale-in}.qr-step-nav{border-bottom:2px solid #f3f4f6;flex-wrap:wrap;gap:10px;margin-bottom:28px;padding-bottom:20px;display:flex}.qr-step-pill{color:#374151;cursor:pointer;background:#f9fafb;border:2px solid #e5e7eb;border-radius:20px;align-items:center;gap:6px;padding:10px 16px;font-size:14px;font-weight:600;transition:all .2s;animation:.3s ease-out backwards qr-fade-in;display:flex}.qr-step-pill:first-child{animation-delay:50ms}.qr-step-pill:nth-child(2){animation-delay:.1s}.qr-step-pill:nth-child(3){animation-delay:.15s}.qr-step-pill:nth-child(4){animation-delay:.2s}.qr-step-pill:nth-child(5){animation-delay:.25s}.qr-step-pill:hover:not(:disabled){color:#1e40af;border-color:#1e40af;transform:translateY(-2px)}.qr-step-pill.qr-step-active{color:#fff;background:#1e40af;border-color:#1e40af}.qr-step-pill.qr-step-complete{border-color:#fbbf24}.qr-step-pill:disabled{opacity:.5;cursor:not-allowed}.qr-step-number{font-weight:600}.qr-questions-container{flex-direction:column;gap:20px;margin-bottom:24px;display:flex}.qr-question-block{transition:transform .2s;animation:.4s ease-out qr-slide-in}.qr-question-header{align-items:flex-start;gap:12px;margin-bottom:14px;display:flex}.qr-question-number{color:#1e40af;background:#dbeafe;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;min-width:28px;height:28px;padding:0 8px;font-size:13px;font-weight:700;display:inline-flex}.qr-question-text{color:#111827;margin:0;padding-top:2px;font-size:16px;font-weight:600;line-height:1.6}.qr-options-grid{gap:10px;display:grid}.qr-option-card{text-align:left;color:#374151;cursor:pointer;background:#fff;border:2px solid #e5e7eb;border-radius:12px;justify-content:space-between;align-items:center;width:100%;padding:14px 16px;font-size:15px;font-weight:500;transition:all .2s;display:flex}.qr-option-card:hover:not(:disabled){border-color:#93c5fd;transform:translate(4px)}.qr-option-card.qr-option-selected{color:#1e40af;background:#eff6ff;border-color:#1e40af}.qr-option-card.qr-option-correct{color:#166534;background:#f0fdf4;border-color:#22c55e;animation:.5s ease-out qr-pulse}.qr-option-card.qr-option-wrong{color:#991b1b;background:#fef2f2;border-color:#ef4444;animation:.4s ease-out qr-shake}.qr-option-card:disabled{cursor:not-allowed}.qr-option-text{flex:1}.qr-option-badge{border-radius:6px;align-items:center;gap:4px;padding:4px 10px;font-size:12px;font-weight:700;animation:.3s ease-out qr-fade-in;display:flex}.qr-badge-correct{color:#166534;background:#dcfce7}.qr-badge-wrong{color:#991b1b;background:#fee2e2}.qr-actions-bar{border-top:2px solid #f3f4f6;flex-wrap:wrap;align-items:center;gap:14px;padding-top:20px;display:flex}.qr-action-buttons{flex-wrap:wrap;gap:12px;display:flex}.qr-submit-button{color:#fff;cursor:pointer;background:#1e40af;border:2px solid #1e40af;border-radius:10px;align-items:center;gap:8px;padding:12px 24px;font-size:15px;font-weight:700;transition:all .2s;display:inline-flex}.qr-submit-button:hover:not(:disabled){background:#1e3a8a;border-color:#1e3a8a;transform:translateY(-2px)}.qr-submit-button:disabled{opacity:.5;cursor:not-allowed;transform:none}.qr-next-button{color:#1e40af;cursor:pointer;background:#fff;border:2px solid #1e40af;border-radius:10px;align-items:center;gap:6px;padding:12px 24px;font-size:15px;font-weight:700;transition:all .2s;animation:.3s ease-out qr-slide-in;display:inline-flex}.qr-next-button:hover{color:#fff;background:#1e40af;transform:translate(4px)}.qr-hint-text{color:#9ca3af;font-size:13px;font-weight:500;animation:.3s ease-out qr-fade-in}.qr-score-card{background:#fef3c7;border:2px solid #fbbf24;border-radius:12px;flex-wrap:wrap;align-items:center;gap:12px;margin-top:20px;padding:16px 20px;animation:.4s ease-out qr-slide-in;display:flex}.qr-score-card svg{color:#d97706;flex-shrink:0}.qr-score-text{color:#92400e;flex:1;font-size:15px;font-weight:600}.qr-score-text strong{color:#000;font-weight:800}.qr-complete-badge{color:#166534;background:#dcfce7;border-radius:8px;padding:6px 14px;font-size:13px;font-weight:700;animation:.6s ease-out qr-pulse}@keyframes qr-fade-in{0%{opacity:0}to{opacity:1}}@keyframes qr-slide-up{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes qr-slide-in{0%{opacity:0;transform:translate(-10px)}to{opacity:1;transform:translate(0)}}@keyframes qr-scale-in{0%{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}@keyframes qr-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes qr-shake{0%,to{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}}@media (max-width:768px){.qr-wrapper{padding:16px}.qr-quiz-card{padding:20px}.qr-main-title{font-size:26px}.qr-subtitle{font-size:14px}.qr-question-text{font-size:15px}.qr-option-card{padding:12px 14px;font-size:14px}.qr-actions-bar,.qr-score-card{flex-direction:column;align-items:flex-start}}@media (max-width:480px){.qr-main-title{font-size:22px}.qr-step-nav{gap:8px}.qr-step-pill{padding:8px 12px;font-size:13px}.qr-question-header{gap:10px}.qr-question-number{min-width:24px;height:24px;font-size:12px}.qr-submit-button,.qr-next-button{justify-content:center;width:100%}}