/* Matheno Frontend CSS */
.matheno-lessons-container { max-width: 1200px; margin: 0 auto; padding: 20px; }
.matheno-lesson-card { background: #fff; padding: 20px; margin: 15px 0; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.matheno-lesson-card h3 { margin-top: 0; color: #2271b1; }
.matheno-lesson-card .chapter { color: #666; font-size: 14px; margin: 10px 0; }

/* Single Lesson */
.matheno-lesson-single { background: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.matheno-breadcrumb { margin-bottom: 20px; }
.matheno-breadcrumb a { text-decoration: none; color: #2271b1; }
.lesson-meta { color: #666; font-size: 14px; margin-bottom: 20px; }

/* Tabs */
.matheno-tabs { display: flex; gap: 10px; margin: 20px 0; border-bottom: 2px solid #eee; }
.matheno-tab-btn { background: none; border: none; padding: 15px 25px; cursor: pointer; font-size: 16px; color: #666; border-bottom: 3px solid transparent; transition: all 0.3s; }
.matheno-tab-btn:hover { color: #2271b1; }
.matheno-tab-btn.active { color: #2271b1; border-bottom-color: #2271b1; font-weight: bold; }

/* Tab Content */
.matheno-tab-content { display: none; padding: 30px 0; }
.matheno-tab-content.active { display: block; }

/* Summary */
.summary-intro { background: #f0f6ff; padding: 20px; border-radius: 8px; margin-bottom: 20px; border-left: 4px solid #2271b1; }
.summary-main { font-size: 16px; line-height: 1.8; margin: 20px 0; }
.key-points { margin: 30px 0; }
.key-point { background: #f9f9f9; padding: 15px; margin: 15px 0; border-radius: 8px; border-left: 4px solid #10b981; }
.key-point h4 { margin-top: 0; color: #10b981; }
.key-point .visual { font-size: 24px; margin: 10px 0; }
.examples { margin: 30px 0; }
.example { background: #fffbeb; padding: 15px; margin: 15px 0; border-radius: 8px; border-left: 4px solid #f59e0b; }
.example h4 { margin-top: 0; color: #f59e0b; }

/* Exercises */
.exercise { background: #f9f9f9; padding: 20px; margin: 20px 0; border-radius: 8px; }
.exercise h4 { margin-top: 0; }
.exercise .difficulty { padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: normal; margin-left: 10px; }
.exercise .difficulty.easy { background: #d4edda; color: #155724; }
.exercise .difficulty.medium { background: #fff3cd; color: #856404; }
.exercise .difficulty.hard { background: #f8d7da; color: #721c24; }
.exercise .question { font-size: 16px; font-weight: 500; margin: 15px 0; }
.exercise details { margin-top: 15px; }
.exercise summary { cursor: pointer; color: #2271b1; font-weight: 500; padding: 10px; background: #f0f6ff; border-radius: 4px; }
.exercise summary:hover { background: #e0edff; }
.solution-steps { margin: 15px 0; }
.solution-steps p { margin: 10px 0; padding-left: 10px; border-left: 2px solid #10b981; }
.final-answer { background: #d4edda; padding: 15px; margin: 15px 0; border-radius: 4px; font-size: 16px; }
.explanation { background: #f0f6ff; padding: 15px; margin: 15px 0; border-radius: 4px; }

/* Quiz */
.quiz-description { font-size: 16px; color: #666; margin: 15px 0; }
.quiz-question { background: #f9f9f9; padding: 20px; margin: 20px 0; border-radius: 8px; }
.quiz-question h4 { margin-top: 0; }
.quiz-options { margin: 15px 0; }
.quiz-option { display: block; padding: 10px; margin: 8px 0; background: #fff; border: 2px solid #ddd; border-radius: 4px; cursor: pointer; transition: all 0.3s; }
.quiz-option:hover { border-color: #2271b1; background: #f0f6ff; }
.quiz-option input { margin-right: 10px; }
.quiz-answer summary { cursor: pointer; color: #2271b1; font-weight: 500; padding: 10px; background: #f0f6ff; border-radius: 4px; margin-top: 15px; }

/* AI Section */
.matheno-ai-section { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; padding: 30px; border-radius: 12px; margin-top: 40px; text-align: center; }
.matheno-ai-section h3 { margin-top: 0; color: #fff; }
.matheno-ai-trigger { background: #fff !important; color: #667eea !important; border: none !important; padding: 15px 30px !important; font-size: 16px !important; font-weight: bold !important; border-radius: 8px !important; cursor: pointer; }
.matheno-ai-trigger:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }

/* Modal */
.matheno-modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); }
.matheno-modal-content { background-color: #fefefe; margin: 5% auto; padding: 0; border-radius: 12px; width: 90%; max-width: 600px; box-shadow: 0 8px 32px rgba(0,0,0,0.3); }
.matheno-close { color: #aaa; float: right; font-size: 28px; font-weight: bold; padding: 10px 20px; cursor: pointer; }
.matheno-close:hover { color: #000; }

/* AI Chat */
.matheno-ai-chat { max-width: 600px; margin: 0; background: #fff; border-radius: 12px; }
.ai-chat-header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; padding: 20px; border-radius: 12px 12px 0 0; }
.ai-chat-header h3 { margin: 0 0 10px; color: #fff; }
.ai-limits { margin: 0; opacity: 0.9; font-size: 14px; }
.ai-chat-messages { height: 400px; overflow-y: auto; padding: 20px; background: #f9f9f9; }
.ai-message, .user-message { margin: 10px 0; padding: 12px 16px; border-radius: 12px; max-width: 80%; }
.ai-message { background: #fff; border: 1px solid #e0e0e0; margin-right: auto; }
.ai-message.loading { background: #f0f0f0; font-style: italic; }
.ai-message.error { background: #fee; border-color: #fcc; }
.user-message { background: #667eea; color: #fff; margin-left: auto; text-align: right; }
.ai-message p, .user-message p { margin: 0; }
.ai-chat-input { display: flex; padding: 15px; border-top: 1px solid #eee; background: #fff; border-radius: 0 0 12px 12px; }
.ai-chat-input input { flex: 1; padding: 12px; border: 1px solid #ddd; border-radius: 8px; margin-right: 10px; font-size: 14px; }
.ai-chat-input button { padding: 12px 24px; background: #667eea; color: #fff; border: none; border-radius: 8px; cursor: pointer; font-weight: 500; }
.ai-chat-input button:hover { background: #5568d3; }

/* No Lessons */
.matheno-no-lessons { text-align: center; padding: 60px 20px; background: #f9f9f9; border-radius: 8px; }
.matheno-no-lessons p { font-size: 16px; color: #666; margin: 15px 0; }

/* Responsive */
@media (max-width: 768px) {
    .matheno-tabs { flex-wrap: wrap; }
    .matheno-tab-btn { padding: 10px 15px; font-size: 14px; }
    .matheno-lesson-single { padding: 20px; }
    .matheno-modal-content { width: 95%; margin: 10% auto; }
    .ai-chat-messages { height: 300px; }
}