.learning-flow{max-width:900px;margin:0 auto;animation:fadeIn .5s ease-in}.flow-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;flex-wrap:wrap;gap:1rem}.phase-indicator{display:flex;align-items:center;gap:.5rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:.75rem 1.5rem;border-radius:24px;font-weight:600;box-shadow:0 4px 12px #667eea4d}.phase-icon{font-size:1.5rem}.phase-text{display:flex;flex-direction:column;line-height:1.3}.phase-text strong{font-size:1.05rem;letter-spacing:.02em}.phase-chapter{font-size:.85rem;opacity:.9}.phase-subtitle{font-size:.85rem;opacity:.85}.progress-info{font-size:1.1rem;font-weight:600;color:#2d3748}.progress-bar{height:12px;background:#e2e8f0;border-radius:6px;overflow:hidden;margin-bottom:2rem;box-shadow:inset 0 2px 4px #0000001a}.progress-fill{height:100%;background:linear-gradient(90deg,#48bb78,#38a169);transition:width .5s ease;box-shadow:0 0 10px #48bb7880}.question-card{background:#fff;padding:3rem;border-radius:20px;box-shadow:0 8px 24px #0000001a}.question-header{display:flex;gap:1rem;margin-bottom:2rem;flex-wrap:wrap}.difficulty-badge{padding:.5rem 1rem;border-radius:20px;font-size:.9rem;font-weight:600;color:#fff}.difficulty-badge[data-difficulty="1"]{background:#48bb78}.difficulty-badge[data-difficulty="2"]{background:#4299e1}.difficulty-badge[data-difficulty="3"]{background:#ed8936}.difficulty-badge[data-difficulty="4"]{background:#f56565}.difficulty-badge[data-difficulty="5"]{background:#9f7aea}.points-badge{padding:.5rem 1rem;border-radius:20px;font-size:.9rem;font-weight:600;background:#edf2f7;color:#2d3748}.question-text{font-size:1.5rem;color:#2d3748;line-height:1.6;margin-bottom:2.5rem;font-weight:600}.options-container{display:flex;flex-direction:column;gap:1rem;margin-bottom:2rem}.option-button{display:flex;align-items:center;gap:1.5rem;padding:1.5rem 2rem;background:#f7fafc;border:3px solid #e2e8f0;border-radius:16px;cursor:pointer;transition:all .3s ease;text-align:left;font-size:1.1rem}.option-button:hover{background:#edf2f7;border-color:#cbd5e0;transform:translate(5px)}.option-button.selected{background:linear-gradient(135deg,#ebf4ff,#e6fffa);border-color:#667eea;box-shadow:0 0 0 3px #667eea33;transform:translate(5px)}.option-button.correct{background:linear-gradient(135deg,#f0fff4,#c6f6d5);border-color:#48bb78;box-shadow:0 0 0 3px #48bb7833}.option-button.wrong{background:linear-gradient(135deg,#fff5f5,#fed7d7);border-color:#f56565;box-shadow:0 0 0 3px #f5656533}.option-button:disabled{cursor:not-allowed;opacity:.8}.option-letter{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:#fff;border-radius:50%;font-weight:700;color:#667eea;flex-shrink:0;font-size:1.1rem;box-shadow:0 2px 4px #0000001a}.option-button.selected .option-letter{background:#667eea;color:#fff}.option-text{flex:1;color:#2d3748;font-weight:500}.action-buttons{display:flex;justify-content:center;margin-bottom:2rem}.submit-button{padding:1rem 3rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:12px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px #667eea66}.submit-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 16px #667eea80}.submit-button:disabled{opacity:.5;cursor:not-allowed}.result-icon{margin-left:auto;font-size:1.5rem;font-weight:700}.option-button.correct .result-icon{color:#48bb78}.option-button.wrong .result-icon{color:#f56565}.explanation-box{margin:2rem 0;padding:1.5rem;border-radius:12px;border-left:4px solid;animation:slideIn .3s ease-out}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.explanation-box.correct{background:linear-gradient(135deg,#f0fff4,#c6f6d5);border-color:#48bb78}.explanation-box.incorrect{background:linear-gradient(135deg,#fffaf0,#feebc8);border-color:#ed8936}.explanation-header{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}.explanation-icon{font-size:1.5rem}.explanation-title{font-size:1.1rem;font-weight:700;color:#2d3748}.explanation-content{color:#2d3748;line-height:1.6}.explanation-content p{margin-bottom:.75rem}.explanation-content p:last-child{margin-bottom:0}.explanation-content strong{color:#1a202c}.explanation-text{margin-top:.5rem}.explanation-text p{margin:.5rem 0;line-height:1.8}.explanation-text strong{font-weight:700;color:#1a202c}.explanation-text em{font-style:italic;color:#4a5568}.explanation-text code{background:#edf2f7;padding:.2rem .5rem;border-radius:4px;font-family:Courier New,monospace;font-size:.9em;color:#d73a49}.explanation-text ul,.explanation-text ol{margin:.75rem 0;padding-left:2rem}.explanation-text li{margin:.25rem 0;line-height:1.6}.explanation-text blockquote{border-left:3px solid #cbd5e0;padding-left:1rem;margin:.75rem 0;color:#4a5568;font-style:italic}.explanation-text table{width:100%;border-collapse:collapse;margin:1rem 0;background:#fff;box-shadow:0 1px 3px #0000001a;border-radius:8px;overflow:hidden}.explanation-text thead{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.explanation-text th{padding:.75rem 1rem;text-align:left;font-weight:600;font-size:.95rem;border-bottom:2px solid #e2e8f0}.explanation-text td{padding:.75rem 1rem;border-bottom:1px solid #e2e8f0;color:#2d3748}.explanation-text tbody tr:hover{background:#f7fafc}.explanation-text tbody tr:last-child td{border-bottom:none}.explanation-text table th:not(:last-child),.explanation-text table td:not(:last-child){border-right:1px solid #e2e8f0}.submit-button.next{background:linear-gradient(135deg,#48bb78,#38a169)}.submit-button.next:hover:not(:disabled){box-shadow:0 6px 16px #48bb7880}.hint-section{background:#fffaf0;border-left:4px solid #ed8936;padding:1rem 1.5rem;border-radius:8px}.hint-text{color:#744210;margin:0;font-size:.95rem}@media(max-width:768px){.question-card{padding:2rem 1.5rem}.question-text{font-size:1.25rem}.option-button{padding:1rem 1.5rem;font-size:1rem}.option-letter{width:36px;height:36px;font-size:1rem}.submit-button{width:100%}.explanation-text table{font-size:.85rem}.explanation-text th,.explanation-text td{padding:.5rem .75rem}}