.cchc-quiz-wrapper { max-width: 900px; margin: 40px auto; padding: 20px; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.1); border-radius: 8px; } .quiz-section { display: none; } .quiz-section.active { display: block; } .quiz-header { text-align: center; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 3px solid #0073aa; } .quiz-header h2 { color: #0073aa; font-size: 28px; margin-bottom: 10px; font-weight: 700; text-transform: uppercase; } .quiz-description { font-size: 16px; color: #666; margin: 10px 0; } .quiz-form { max-width: 600px; margin: 0 auto; } .form-group { margin-bottom: 25px; } .form-group label { display: block; font-weight: 600; margin-bottom: 8px; color: #333; font-size: 15px; } .form-group input { width: 100%; padding: 12px 15px; border: 2px solid #ddd; border-radius: 5px; font-size: 15px; transition: border-color 0.3s; } .form-group input:focus { outline: none; border-color: #0073aa; } .form-group small { display: block; margin-top: 5px; color: #666; font-size: 13px; } .required { color: #d00; } .form-actions { text-align: center; margin-top: 30px; } .btn { padding: 12px 30px; border: none; border-radius: 5px; font-size: 16px; cursor: pointer; transition: all 0.3s; font-weight: 600; } .btn-primary { background: #0073aa; color: #fff; } .btn-primary:hover { background: #005a87; } .btn-secondary { background: #666; color: #fff; } .btn-secondary:hover { background: #555; } .btn-success { background: #28a745; color: #fff; } .btn-success:hover { background: #218838; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .quiz-info { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; padding: 15px; background: #f8f9fa; border-radius: 5px; } .timer-box { display: flex; align-items: center; gap: 10px; } .timer-label { font-weight: 600; color: #333; } .timer { font-size: 24px; font-weight: 700; color: #d00; font-family: 'Courier New', monospace; } .question-counter { font-size: 18px; font-weight: 600; color: #0073aa; } .quiz-content { min-height: 400px; padding: 30px 20px; } .question-item { display: none; } .question-item.active { display: block; animation: fadeIn 0.3s; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .question-text { font-size: 18px; font-weight: 600; margin-bottom: 25px; line-height: 1.6; color: #333; } .question-number { display: inline-block; background: #0073aa; color: #fff; padding: 5px 12px; border-radius: 5px; margin-right: 10px; font-weight: 700; } .options-list { list-style: none; padding: 0; margin: 0; } .option-item { margin-bottom: 15px; } .option-label { display: flex; align-items: flex-start; padding: 15px 20px; border: 2px solid #ddd; border-radius: 5px; cursor: pointer; transition: all 0.3s; background: #fff; } .option-label:hover { border-color: #0073aa; background: #f0f8ff; } .option-label input[type="radio"] { margin-right: 15px; margin-top: 3px; width: 18px; height: 18px; cursor: pointer; } .option-label input[type="radio"]:checked + .option-text { font-weight: 600; color: #0073aa; } .option-label.selected { border-color: #0073aa; background: #f0f8ff; } .option-text { flex: 1; font-size: 16px; line-height: 1.5; } .prediction-input { width: 100%; max-width: 300px; padding: 12px 15px; border: 2px solid #ddd; border-radius: 5px; font-size: 16px; margin-top: 15px; } .quiz-navigation { display: flex; justify-content: space-between; align-items: center; margin-top: 30px; padding-top: 20px; border-top: 2px solid #eee; } .result-header { text-align: center; margin-bottom: 30px; } .result-header h2 { color: #28a745; font-size: 32px; margin-bottom: 10px; } .result-content { text-align: center; padding: 40px 20px; } .result-score { font-size: 72px; font-weight: 700; color: #0073aa; margin: 20px 0; } .result-details { font-size: 18px; color: #666; margin: 15px 0; } .result-message { font-size: 20px; font-weight: 600; color: #333; margin: 30px 0; } .message { padding: 12px 20px; border-radius: 5px; margin-top: 20px; font-weight: 600; } .message.success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; } .message.error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; } .message.warning { background: #fff3cd; color: #856404; border: 1px solid #ffeaa7; } .loading-spinner { display: inline-block; width: 20px; height: 20px; border: 3px solid rgba(0,0,0,.1); border-radius: 50%; border-top-color: #0073aa; animation: spin 1s ease-in-out infinite; } @keyframes spin { to { transform: rotate(360deg); } } @media (max-width: 768px) { .cchc-quiz-wrapper { margin: 20px auto; padding: 15px; } .quiz-header h2 { font-size: 22px; } .quiz-info { flex-direction: column; gap: 15px; } .question-text { font-size: 16px; } .option-text { font-size: 15px; } .quiz-navigation { flex-direction: column; gap: 10px; } .quiz-navigation .btn { width: 100%; } }