/* ================================================
   ChameLearn - Global Variables
   متوافقة تماماً مع لوحة التحكم (user-profile.php v4.0)
   ================================================ */
:root {
    /* ✅ ألوان لوحة التحكم الأساسية (متطابقة) */
    --primary-gradient-start: #6366f1;
    --primary-gradient-end: #7c3aed;
    --success-color: #10b981;
    --error-color: #ef4444;
    --warning-color: #f59e0b;
    --info-color: #3b82f6;
    
    /* ✅ ألوان الخلفية والنصوص (تباين عالي واحترافي) */
    --light-bg: #f8fafc;
    --medium-bg: #f1f5f9;
    --border-color: #e2e8f0;
    --dark-text: #0f172a;      /* Slate 900 */
    --medium-text: #334155;    /* Slate 700 */
    --light-text: #64748b;     /* Slate 500 */
    
    /* ✅ الظلال والانتقالات */
    --card-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
    --hover-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
    --modal-shadow: 0 18px 45px rgba(15, 23, 42, 0.12);
    --transition-fast: all 0.2s ease;
    --transition-medium: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* ✅ الحدود المنحنية */
    --border-radius-small: 8px;
    --border-radius-medium: 14px;
    --border-radius-large: 20px;
    --border-radius-xl: 24px;
}

/* ================================================
   ChameLearn - Video Button Container
   ================================================ */
.video-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 100%;
}

.chamelearn-lesson-button-container {
    text-align: center;
    margin: 30px auto 20px;
    padding: 30px 25px;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-radius: var(--border-radius-xl);
    border: 2px solid #bfdbfe;
    box-shadow: 0 10px 35px rgba(102, 126, 234, 0.15);
    max-width: 650px;
    width: 95%;
    animation: fadeInUp 0.6s ease;
}

.sm-start-lesson-btn {
    padding: 16px 40px;
    background: linear-gradient(135deg, var(--primary-gradient-start) 0%, var(--primary-gradient-end) 100%);
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 20px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
    transition: var(--transition-medium);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-decoration: none;
}

.sm-start-lesson-btn:hover {
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 15px 40px rgba(102, 126, 234, 0.6);
    color: white;
}

/* ================================================
   Student Interface - واجهة الطالب
   ================================================ */
.chamelearn-student-interface {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    z-index: 999999;
    overflow-y: auto; /* شريط تمرير واحد للواجهة كاملة */
    padding: 20px;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    direction: rtl;
}

.sm-close-btn {
    position: fixed;
    top: 20px;
    left: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--error-color) 0%, #dc2626 100%);
    color: white;
    border: none;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
    z-index: 1000000; /* أعلى من أي عنصر داخلي */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-medium);
}

.sm-close-btn:hover {
    transform: scale(1.1) rotate(90deg);
}

/* ================================================
   Section Cards - بطاقات الأقسام
   ================================================ */
.section-card {
    background: white;
    border-radius: var(--border-radius-large);
    padding: 30px;
    box-shadow: var(--card-shadow);
    border: 2px solid var(--border-color);
    transition: var(--transition-medium);
    cursor: pointer;
    width: 100%;
    max-width: 100%; /* متجاوب بالكامل */
    position: relative;
}

.section-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--hover-shadow);
    border-color: var(--primary-gradient-start);
}

/* ================================================
   Action Buttons - أزرار الأقسام
   ================================================ */
.action-btn {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: var(--border-radius-medium);
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    transition: var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: white;
    text-decoration: none;
}

.action-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    color: white;
}

.action-btn.exercises-btn { background: linear-gradient(135deg, var(--primary-gradient-start) 0%, var(--primary-gradient-end) 100%); }
.action-btn.mindmap-btn { background: linear-gradient(135deg, var(--success-color) 0%, #0ea5e9 100%); }
.action-btn.view-btn { background: linear-gradient(135deg, var(--warning-color) 0%, #ea580c 100%); }

/* ================================================
   Float Modal - الواجهة العائمة للدروس (مُصححة لمنع التمرير المزدوج)
   ================================================ */
.sm-float-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.8);
    z-index: 999999;
    padding: 15px;
    animation: fadeIn 0.3s ease;
    display: flex; /* استخدام Flexbox لمحاذاة آمنة على جميع الشاشات */
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

.sm-float-modal-content {
    background: white;
    border-radius: var(--border-radius-large);
    width: 100%;
    max-width: 1200px;
    max-height: 90vh; /* يمنع تجاوز ارتفاع الشاشة */
    box-shadow: var(--modal-shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden; /* يمنع التمرير في الحاوية الرئيسية */
    position: relative;
}

.sm-float-modal-header {
    background: linear-gradient(135deg, var(--primary-gradient-start) 0%, var(--primary-gradient-end) 100%);
    color: white;
    padding: 18px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0; /* يمنع انكماش الهيدر */
}

.sm-float-modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sm-float-modal-actions {
    display: flex;
    gap: 10px;
}

.sm-float-modal-body {
    flex: 1;
    overflow-y: auto; /* شريط التمرير الوحيد يظهر هنا فقط إذا لزم الأمر */
    background: var(--light-bg);
    padding: 20px;
}

.sm-float-modal-body::-webkit-scrollbar { width: 8px; }
.sm-float-modal-body::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 10px; }
.sm-float-modal-body::-webkit-scrollbar-thumb { background: linear-gradient(135deg, var(--primary-gradient-start) 0%, var(--primary-gradient-end) 100%); border-radius: 10px; }

.sm-float-modal-body iframe {
    width: 100%;
    height: 100%;
    min-height: 500px;
    border: none;
    border-radius: var(--border-radius-medium);
}

/* ================================================
   Dashboard Modals - نوافذ لوحة التحكم
   ================================================ */
.chamelearn-modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(15, 23, 42, 0.6);
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease;
    backdrop-filter: blur(4px);
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto; /* يسمح بالتمرير للشاشة الصغيرة */
}

.chamelearn-modal-content {
    background: white;
    padding: 35px;
    border-radius: var(--border-radius-large);
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto; /* شريط تمرير واحد مضمون */
    animation: smSlideUp 0.3s ease;
    box-shadow: var(--modal-shadow);
}

.chamelearn-modal-large .chamelearn-modal-content {
    max-width: 950px;
}

.chamelearn-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.chamelearn-modal-header h3 {
    margin: 0;
    font-size: 22px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--dark-text);
    font-weight: 800;
}

.sm-close {
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: var(--light-text);
    transition: var(--transition-fast);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

.sm-close:hover {
    background: #fee2e2;
    color: var(--error-color);
    transform: rotate(90deg);
}

.chamelearn-modal-body {
    /* إزالة overflow-y من هنا لمنع التمرير المزدوج */
    overflow-y: visible; 
}

/* ================================================
   Mindmap Student - الخريطة الذهنية للطالب
   ================================================ */
.mindmap-student-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000000;
    animation: fadeIn 0.4s ease;
    padding: 20px;
    overflow: auto;
    backdrop-filter: blur(5px);
}

.mindmap-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: white;
    border-radius: 32px;
    padding: 40px 30px;
    box-shadow: var(--modal-shadow);
    max-width: 1200px;
    width: 100%;
    margin: auto;
}

.central-node {
    background: linear-gradient(135deg, var(--primary-gradient-start) 0%, var(--primary-gradient-end) 100%);
    color: white;
    padding: 30px 50px;
    border-radius: 50px;
    font-size: 28px;
    font-weight: 800;
    box-shadow: 0 15px 40px rgba(102, 126, 234, 0.4);
    animation: pulse 2s infinite, float 3s ease-in-out infinite;
    text-align: center;
    margin-bottom: 50px;
    max-width: 90%;
    word-wrap: break-word;
}

.branches-container {
    display: flex;
    gap: 25px;
    flex-wrap: wrap;
    justify-content: center;
    position: relative;
    width: 100%;
}

.branch-card {
    padding: 20px 25px;
    border-radius: 16px;
    cursor: pointer;
    transition: var(--transition-medium);
    font-weight: 700;
    font-size: 15px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    text-align: center;
    min-width: 160px;
    max-width: 220px;
    color: white;
    background: linear-gradient(135deg, var(--info-color) 0%, var(--primary-gradient-start) 100%);
}

.branch-card:hover {
    transform: translateY(-6px) scale(1.03);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

/* ================================================
   Exercise Student Modal - تمارين الطالب
   ================================================ */
.exercise-student-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
    z-index: 9999999;
    animation: fadeIn 0.3s ease;
    display: flex;
    flex-direction: column;
}

/* ================================================
   Buttons & Badges - الأزرار والشارات العامة
   ================================================ */
.chamelearn-btn {
    padding: 12px 24px;
    border: none;
    border-radius: var(--border-radius-medium);
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition-medium);
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
}

.chamelearn-btn-primary { background: linear-gradient(135deg, var(--primary-gradient-start) 0%, var(--primary-gradient-end) 100%); color: white; }
.chamelearn-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4); color: white; }
.chamelearn-btn-secondary { background: white; color: var(--primary-gradient-start); border: 2px solid var(--primary-gradient-start); }
.chamelearn-btn-secondary:hover { background: var(--primary-gradient-start); color: white; }
.chamelearn-btn-ghost { background: var(--medium-bg); color: var(--medium-text); }
.chamelearn-btn-danger { background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%); color: white; }
.chamelearn-btn-sm { padding: 8px 14px; border: none; border-radius: var(--border-radius-small); font-size: 12px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: var(--transition-fast); }
.chamelearn-btn-full { width: 100%; justify-content: center; margin-top: 15px; }

.sm-badge-sm {
    padding: 5px 10px;
    background: white;
    border-radius: var(--border-radius-small);
    font-size: 11px;
    font-weight: 700;
    border: 1px solid var(--border-color);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.sm-badge-primary { background: #eff6ff; color: #1e40af; border-color: #bfdbfe; }
.sm-badge-success { background: #dcfce7; color: #166534; border-color: #86efac; }
.sm-badge-warning { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.sm-badge-info { background: #e0e7ff; color: #3730a3; border-color: #c7d2fe; }

.sm-grade-badge {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: white;
}
.grade-excellent { background: var(--success-color); }
.grade-very-good { background: var(--info-color); }
.grade-good { background: #8b5cf6; }
.grade-pass { background: var(--warning-color); }
.grade-needs-work { background: var(--error-color); }
.grade-not-started { background: #94a3b8; }

/* ================================================
   Progress Bar - شريط التقدم
   ================================================ */
.sm-progress-bar {
    height: 8px;
    background: var(--border-color);
    border-radius: 10px;
    overflow: hidden;
}

.sm-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-gradient-start) 0%, var(--primary-gradient-end) 100%);
    border-radius: 10px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ================================================
   Lists & Summaries - القوائم والملخصات
   ================================================ */
.sm-student-lessons-list { display: grid; gap: 15px; }
.sm-student-lesson-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: white;
    border-radius: var(--border-radius-large);
    border: 2px solid var(--border-color);
    transition: var(--transition-medium);
}
.sm-student-lesson-item:hover { border-color: var(--primary-gradient-start); transform: translateX(-5px); box-shadow: var(--hover-shadow); }
.sm-student-lesson-info { flex: 1; }
.sm-student-lesson-meta { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }

.chamelearn-lessons-list, .sm-students-list { display: grid; gap: 10px; }
.chamelearn-lesson-item, .sm-student-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 18px;
    background: var(--light-bg);
    border-radius: var(--border-radius-medium);
    transition: var(--transition-fast);
    gap: 15px;
    flex-wrap: wrap;
    border: 1px solid transparent;
}
.chamelearn-lesson-item:hover, .sm-student-item:hover { background: #eff6ff; transform: translateX(-4px); border-color: #bfdbfe; }

.chamelearn-lesson-info, .sm-student-info-col { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 200px; }
.chamelearn-lesson-info small, .sm-student-info-col small { color: var(--light-text); font-size: 12px; font-weight: 600; }
.chamelearn-lesson-meta, .sm-student-stats-col { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.chamelearn-lesson-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.sm-student-rank { font-size: 24px; font-weight: 800; color: var(--primary-gradient-start); min-width: 40px; text-align: center; }

.sm-subject-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-bottom: 25px;
    padding: 22px;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-radius: var(--border-radius-large);
    border: 2px solid #bfdbfe;
}
.sm-summary-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: white;
    border-radius: var(--border-radius-medium);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: var(--transition-fast);
}
.sm-summary-item:hover { transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0,0,0,0.08); }
.sm-summary-item i { font-size: 28px; color: var(--primary-gradient-start); }
.sm-summary-item strong { font-size: 24px; font-weight: 800; color: var(--dark-text); display: block; line-height: 1; }
.sm-summary-item span { font-size: 12px; color: var(--light-text); font-weight: 600; margin-top: 3px; }

/* ================================================
   Tabs - التبويبات
   ================================================ */
.sm-details-tabs { display: flex; gap: 10px; margin-bottom: 20px; border-bottom: 2px solid var(--border-color); }
.sm-tab-btn {
    padding: 12px 20px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    font-weight: 700;
    color: var(--light-text);
    transition: var(--transition-fast);
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 10px 10px 0 0;
}
.sm-tab-btn:hover { color: var(--primary-gradient-start); background: #eff6ff; }
.sm-tab-btn.active { color: var(--primary-gradient-start); border-bottom-color: var(--primary-gradient-start); background: #eff6ff; }
.sm-tab-content { display: none; }
.sm-tab-content.active { display: block; animation: fadeIn 0.3s; }

/* ================================================
   Empty State - الحالة الفارغة
   ================================================ */
.sm-empty { text-align: center; padding: 40px; color: var(--light-text); font-size: 16px; font-weight: 600; }
.sm-empty-state { text-align: center; padding: 60px 30px; grid-column: 1 / -1; background: var(--light-bg); border-radius: var(--border-radius-large); border: 2px dashed var(--border-color); }
.sm-empty-state i { font-size: 64px; color: #94a3b8; margin-bottom: 20px; }
.sm-empty-state h3 { font-size: 22px; color: var(--dark-text); margin: 0 0 10px 0; font-weight: 700; }
.sm-empty-state p { color: var(--light-text); font-size: 15px; max-width: 400px; margin: 0 auto; }

/* ================================================
   Animations - الحركات
   ================================================ */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes smSlideUp { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ================================================
   Responsive Design - التصميم المتجاوب الشامل
   ================================================ */

/* أجهزة التابلت والشاشات المتوسطة */
@media (max-width: 1024px) {
    .sm-subject-summary { grid-template-columns: repeat(2, 1fr); }
    .sm-float-modal-content { max-width: 95%; }
}

/* أجهزة الموبايل والتابلت الصغير */
@media (max-width: 768px) {
    .chamelearn-student-interface { padding: 15px; }
    .sm-close-btn { top: 15px; left: 15px; width: 45px; height: 45px; font-size: 22px; }
    
    .chamelearn-lesson-button-container {
        max-width: 100%;
        margin: 20px 0;
        padding: 25px 20px;
    }
    .sm-start-lesson-btn { width: 100%; font-size: 18px; padding: 16px; }
    
    .section-card { padding: 25px; }
    
    .sm-float-modal { padding: 10px; align-items: flex-start; } /* يبدأ من الأعلى في الموبايل */
    .sm-float-modal-content { max-height: 95vh; border-radius: var(--border-radius-medium); }
    .sm-float-modal-header { padding: 15px; }
    .sm-float-modal-header h3 { font-size: 16px; }
    
    .chamelearn-modal-content { padding: 25px 20px; max-height: 95vh; }
    .chamelearn-modal-header h3 { font-size: 20px; }
    
    .sm-subject-summary { grid-template-columns: 1fr; }
    
    .chamelearn-lesson-item, .sm-student-item, .sm-student-lesson-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    .chamelearn-lesson-actions, .sm-student-stats-col, .sm-student-lesson-meta {
        width: 100%;
        justify-content: flex-start;
    }
    .chamelearn-btn-full { width: 100%; }
    
    .central-node { font-size: 22px; padding: 25px 30px; margin-bottom: 30px; }
    .branch-card { min-width: 140px; max-width: 100%; font-size: 14px; padding: 15px; }
    .branches-container { gap: 15px; }
    
    .sm-details-tabs { overflow-x: auto; white-space: nowrap; padding-bottom: 5px; }
    .sm-tab-btn { flex-shrink: 0; }
}

/* شاشات الموبايل الصغيرة جداً */
@media (max-width: 480px) {
    .chamelearn-lesson-button-container { padding: 20px 15px; }
    .action-btn { font-size: 15px; padding: 12px; }
    .sm-summary-item strong { font-size: 20px; }
    .sm-summary-item i { font-size: 24px; }
    .mindmap-container { padding: 25px 15px; }
}
/* Chame 75-frame layered interaction runtime */
#chame-learn-companion .cl-chame-image{contain:layout paint;}

/* =====================================================================
 * ChameLearn UI/UX System — visual layer only
 * ---------------------------------------------------------------------
 * This layer intentionally preserves existing DOM hooks, JS handlers,
 * AJAX actions, IDs and data attributes. It normalizes the visual system
 * without changing application behavior.
 * ===================================================================== */
:root {
    --cl-primary: #6366f1;
    --cl-primary-hover: #4f46e5;
    --cl-primary-soft: #eef2ff;
    --cl-primary-border: #c7d2fe;
    --cl-secondary: #7c3aed;
    --cl-secondary-soft: #f5f3ff;
    --cl-accent: #0891b2;
    --cl-success: #059669;
    --cl-success-soft: #ecfdf5;
    --cl-warning: #d97706;
    --cl-warning-soft: #fffbeb;
    --cl-danger: #dc2626;
    --cl-danger-soft: #fef2f2;
    --cl-info: #2563eb;
    --cl-info-soft: #eff6ff;
    --cl-bg: #f8fafc;
    --cl-surface: #ffffff;
    --cl-surface-subtle: #f8fafc;
    --cl-border: #e2e8f0;
    --cl-border-strong: #cbd5e1;
    --cl-text: #0f172a;
    --cl-text-secondary: #334155;
    --cl-text-muted: #64748b;
    --cl-radius-sm: 8px;
    --cl-radius-md: 12px;
    --cl-radius-lg: 16px;
    --cl-radius-xl: 20px;
    --cl-shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
    --cl-shadow-md: 0 8px 24px rgba(15, 23, 42, .08);
    --cl-shadow-lg: 0 18px 45px rgba(15, 23, 42, .12);
    --cl-focus: 0 0 0 3px rgba(99, 102, 241, .18);
    --cl-ease: cubic-bezier(.2, .8, .2, 1);
}

/* ---------- Global ChameLearn surfaces ---------- */
.chamelearn-container,
.chamelearn-dashboard {
    color: var(--cl-text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.chamelearn-container *,
.chamelearn-dashboard * {
    box-sizing: border-box;
}

.chamelearn-container button,
.chamelearn-container input,
.chamelearn-container select,
.chamelearn-container textarea,
.chamelearn-dashboard button,
.chamelearn-dashboard input,
.chamelearn-dashboard select,
.chamelearn-dashboard textarea {
    font-family: inherit;
}

.chamelearn-container button:focus-visible,
.chamelearn-container a:focus-visible,
.chamelearn-container input:focus-visible,
.chamelearn-container select:focus-visible,
.chamelearn-container textarea:focus-visible,
.chamelearn-dashboard button:focus-visible,
.chamelearn-dashboard a:focus-visible,
.chamelearn-dashboard input:focus-visible,
.chamelearn-dashboard select:focus-visible,
.chamelearn-dashboard textarea:focus-visible {
    outline: none;
    box-shadow: var(--cl-focus) !important;
}

/* ---------- Buttons: one visual language ---------- */
.chamelearn-container .chamelearn-btn,
.chamelearn-dashboard .chamelearn-btn,
.chamelearn-container .chamelearn-btn-sm,
.chamelearn-dashboard .chamelearn-btn-sm,
.chamelearn-container .action-btn {
    min-height: 42px;
    border-radius: var(--cl-radius-md);
    font-weight: 700;
    letter-spacing: -.01em;
    transition: transform .18s var(--cl-ease), box-shadow .18s var(--cl-ease), background-color .18s ease, border-color .18s ease, color .18s ease;
}

.chamelearn-container .chamelearn-btn-primary,
.chamelearn-dashboard .chamelearn-btn-primary,
.chamelearn-container .action-btn.exercises-btn {
    background: linear-gradient(135deg, var(--cl-primary) 0%, var(--cl-secondary) 100%) !important;
    border: 1px solid transparent !important;
    color: #fff !important;
    box-shadow: 0 5px 14px rgba(99, 102, 241, .20);
}

.chamelearn-container .chamelearn-btn-primary:hover,
.chamelearn-dashboard .chamelearn-btn-primary:hover,
.chamelearn-container .action-btn.exercises-btn:hover {
    background: linear-gradient(135deg, var(--cl-primary-hover) 0%, #6d28d9 100%) !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(99, 102, 241, .24);
}

.chamelearn-container .chamelearn-btn-secondary,
.chamelearn-dashboard .chamelearn-btn-secondary {
    background: var(--cl-surface) !important;
    color: var(--cl-primary-hover) !important;
    border: 1px solid var(--cl-primary-border) !important;
    box-shadow: var(--cl-shadow-sm);
}

.chamelearn-container .chamelearn-btn-secondary:hover,
.chamelearn-dashboard .chamelearn-btn-secondary:hover {
    background: var(--cl-primary-soft) !important;
    border-color: #a5b4fc !important;
    color: #4338ca !important;
    transform: translateY(-1px);
}

.chamelearn-container .chamelearn-btn-ghost,
.chamelearn-dashboard .chamelearn-btn-ghost {
    background: #f1f5f9 !important;
    color: var(--cl-text-secondary) !important;
    border: 1px solid var(--cl-border) !important;
}

.chamelearn-container .chamelearn-btn-ghost:hover,
.chamelearn-dashboard .chamelearn-btn-ghost:hover {
    background: #e2e8f0 !important;
    border-color: var(--cl-border-strong) !important;
    transform: translateY(-1px);
}

.chamelearn-container .chamelearn-btn-danger,
.chamelearn-dashboard .chamelearn-btn-danger {
    background: var(--cl-danger) !important;
    color: #fff !important;
    border-color: transparent !important;
}

.chamelearn-container .chamelearn-btn-sm,
.chamelearn-dashboard .chamelearn-btn-sm {
    min-height: 34px;
    padding: 8px 12px;
    border-radius: 10px;
}

.chamelearn-container .action-btn {
    padding: 13px 16px;
    border: 1px solid transparent;
}
.chamelearn-container .action-btn.mindmap-btn { background: linear-gradient(135deg, #059669, #0891b2) !important; }
.chamelearn-container .action-btn.view-btn { background: linear-gradient(135deg, #d97706, #ea580c) !important; }

/* ---------- Primary lesson CTA: remove the loud/red treatment ---------- */
.chamelearn-container .sm-start-lesson-btn,
.chamelearn-container .chamelearn-lesson-button-container .chamelearn-btn-primary {
    background: linear-gradient(135deg, var(--cl-primary) 0%, var(--cl-secondary) 100%) !important;
    color: #fff !important;
    border: 1px solid transparent !important;
    box-shadow: 0 8px 22px rgba(99, 102, 241, .22) !important;
    border-radius: 14px;
}
.chamelearn-container .sm-start-lesson-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 28px rgba(99, 102, 241, .26) !important;
}

/* ---------- Close controls: quiet, consistent, never rotating ---------- */
.chamelearn-container .sm-close,
.chamelearn-container .sm-close-btn,
.chamelearn-container .modal-close,
.chamelearn-container .close-floating-interface,
.chamelearn-container #sm-close-student-interface,
.chamelearn-dashboard .sm-close,
.chamelearn-dashboard .modal-close {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px;
    min-height: 38px;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 10px !important;
    background: #f8fafc !important;
    border: 1px solid var(--cl-border) !important;
    color: var(--cl-text-muted) !important;
    box-shadow: none !important;
    font-size: 18px !important;
    line-height: 1 !important;
    transform: none !important;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease !important;
}
.chamelearn-container .sm-close:hover,
.chamelearn-container .sm-close-btn:hover,
.chamelearn-container .modal-close:hover,
.chamelearn-container .close-floating-interface:hover,
.chamelearn-container #sm-close-student-interface:hover,
.chamelearn-dashboard .sm-close:hover,
.chamelearn-dashboard .modal-close:hover {
    background: var(--cl-danger-soft) !important;
    border-color: #fecaca !important;
    color: var(--cl-danger) !important;
    transform: none !important;
}

/* ---------- Cards / sections: less visual noise ---------- */
.chamelearn-container .section-card,
.chamelearn-container .sm-subject-card,
.chamelearn-container .sm-score-card,
.chamelearn-container .sm-student-lesson-item,
.chamelearn-dashboard .sm-section,
.chamelearn-dashboard .sm-subject-card,
.chamelearn-dashboard .sm-student-card,
.chamelearn-dashboard .sm-focus-card,
.chamelearn-dashboard .sm-score-card {
    border-color: var(--cl-border) !important;
    box-shadow: var(--cl-shadow-sm) !important;
}
.chamelearn-container .section-card:hover,
.chamelearn-container .sm-subject-card:hover,
.chamelearn-container .sm-score-card:hover,
.chamelearn-dashboard .sm-subject-card:hover,
.chamelearn-dashboard .sm-student-card:hover,
.chamelearn-dashboard .sm-focus-card:hover,
.chamelearn-dashboard .sm-score-card:hover {
    border-color: var(--cl-primary-border) !important;
    box-shadow: var(--cl-shadow-md) !important;
    transform: translateY(-2px) !important;
}

/* ---------- Dashboard shell ---------- */
.chamelearn-dashboard {
    background: var(--cl-bg) !important;
    padding: clamp(16px, 2.4vw, 30px) !important;
}
.chamelearn-dashboard-header {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important;
    border-radius: var(--cl-radius-xl) !important;
    box-shadow: 0 18px 45px rgba(79, 70, 229, .20) !important;
}
.chamelearn-dashboard-header::before { background: rgba(255,255,255,.045) !important; }
.chamelearn-header-content h1 { text-shadow: none !important; }
.chamelearn-dashboard .sm-stat-card {
    border: 1px solid rgba(255,255,255,.70) !important;
    box-shadow: var(--cl-shadow-sm) !important;
}
.chamelearn-dashboard .sm-stat-card:hover { transform: translateY(-2px) !important; box-shadow: var(--cl-shadow-md) !important; }

/* ---------- Tabs: calm segmented navigation + horizontal mobile scroll ---------- */
.chamelearn-container .sm-details-tabs,
.chamelearn-dashboard .sm-details-tabs {
    display: flex;
    align-items: stretch;
    gap: 4px;
    margin: 0 0 20px;
    padding: 4px;
    border: 1px solid var(--cl-border) !important;
    border-bottom-width: 1px !important;
    border-radius: 14px;
    background: #f8fafc;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}
.chamelearn-container .sm-tab-btn,
.chamelearn-dashboard .sm-tab-btn {
    position: relative;
    flex: 0 0 auto;
    min-height: 40px;
    padding: 9px 15px;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: var(--cl-text-muted) !important;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    transition: background-color .18s ease, color .18s ease, box-shadow .18s ease !important;
}
.chamelearn-container .sm-tab-btn:hover,
.chamelearn-dashboard .sm-tab-btn:hover {
    color: var(--cl-primary-hover) !important;
    background: #fff !important;
}
.chamelearn-container .sm-tab-btn.active,
.chamelearn-dashboard .sm-tab-btn.active {
    color: #4338ca !important;
    background: #fff !important;
    box-shadow: 0 1px 3px rgba(15,23,42,.08), 0 0 0 1px rgba(99,102,241,.06) !important;
}
.chamelearn-container .sm-tab-btn.active::after,
.chamelearn-dashboard .sm-tab-btn.active::after {
    content: '';
    position: absolute;
    inset-inline: 12px;
    bottom: 3px;
    height: 2px;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--cl-primary), var(--cl-secondary));
}
.chamelearn-container .sm-tab-content.active,
.chamelearn-dashboard .sm-tab-content.active {
    animation: clTabEnter .22s var(--cl-ease) both !important;
}
@keyframes clTabEnter {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---------- Forms ---------- */
.chamelearn-container .sm-input,
.chamelearn-container .sm-select,
.chamelearn-dashboard .sm-input,
.chamelearn-dashboard .sm-select {
    min-height: 44px;
    background: #fff !important;
    color: var(--cl-text) !important;
    border: 1px solid var(--cl-border-strong) !important;
    border-radius: 10px !important;
    box-shadow: var(--cl-shadow-sm);
}
.chamelearn-container .sm-input:focus,
.chamelearn-container .sm-select:focus,
.chamelearn-dashboard .sm-input:focus,
.chamelearn-dashboard .sm-select:focus {
    border-color: #818cf8 !important;
    box-shadow: var(--cl-focus) !important;
}

/* ---------- Modals / overlays ---------- */
.chamelearn-container .chamelearn-modal,
.chamelearn-container .sm-float-modal {
    background: rgba(15, 23, 42, .48) !important;
    backdrop-filter: blur(4px);
}
.chamelearn-container .chamelearn-modal-content,
.chamelearn-container .sm-float-modal-content {
    border: 1px solid var(--cl-border) !important;
    border-radius: 18px !important;
    box-shadow: 0 24px 70px rgba(15,23,42,.18) !important;
}
.chamelearn-container .chamelearn-modal-header,
.chamelearn-container .sm-float-modal-header {
    border-bottom: 1px solid var(--cl-border);
    padding-bottom: 14px;
}

/* Generated floating teacher interface has inline styles: normalize only its shell. */
#chamelearn-floating-interface {
    border: 1px solid var(--cl-border) !important;
    border-radius: 18px !important;
    box-shadow: 0 24px 70px rgba(15,23,42,.18) !important;
    padding: clamp(14px, 2vw, 24px) !important;
}

/* ---------- Notices / badges ---------- */
.chamelearn-container .sm-badge-sm,
.chamelearn-dashboard .sm-badge-sm {
    border-radius: 999px !important;
    border: 1px solid var(--cl-border) !important;
    box-shadow: none !important;
}
.chamelearn-container .sm-badge-primary,
.chamelearn-dashboard .sm-badge-primary { background: var(--cl-primary-soft) !important; color: #4338ca !important; border-color: var(--cl-primary-border) !important; }
.chamelearn-container .sm-badge-info,
.chamelearn-dashboard .sm-badge-info { background: var(--cl-info-soft) !important; color: #1d4ed8 !important; border-color: #bfdbfe !important; }
.chamelearn-container .sm-badge-success,
.chamelearn-dashboard .sm-badge-success { background: var(--cl-success-soft) !important; color: #047857 !important; border-color: #a7f3d0 !important; }
.chamelearn-container .sm-badge-warning,
.chamelearn-dashboard .sm-badge-warning { background: var(--cl-warning-soft) !important; color: #b45309 !important; border-color: #fde68a !important; }

/* ---------- Lists / details ---------- */
.chamelearn-dashboard .chamelearn-lesson-item,
.chamelearn-dashboard .sm-student-item {
    background: #fff !important;
    border: 1px solid var(--cl-border) !important;
    border-radius: 12px !important;
}
.chamelearn-dashboard .chamelearn-lesson-item:hover,
.chamelearn-dashboard .sm-student-item:hover {
    background: #fff !important;
    border-color: var(--cl-primary-border) !important;
    transform: translateX(-2px) !important;
}
.chamelearn-dashboard .sm-subject-summary,
.chamelearn-dashboard .sm-lms-link-box {
    background: var(--cl-primary-soft) !important;
    border-color: var(--cl-primary-border) !important;
}

/* ---------- Progress ---------- */
.chamelearn-container .sm-progress-bar,
.chamelearn-dashboard .sm-progress-bar {
    background: #e2e8f0 !important;
    border-radius: 999px !important;
    overflow: hidden;
}
.chamelearn-container .sm-progress-fill.lesson-progress,
.chamelearn-dashboard .sm-progress-fill.lesson-progress { background: linear-gradient(90deg, #6366f1, #7c3aed) !important; }
.chamelearn-container .sm-progress-fill.exercise-progress,
.chamelearn-dashboard .sm-progress-fill.exercise-progress { background: linear-gradient(90deg, #059669, #0891b2) !important; }

/* ---------- Student fullscreen close control ---------- */
.chamelearn-container #sm-close-student-interface {
    position: fixed !important;
    top: max(14px, env(safe-area-inset-top)) !important;
    inset-inline-start: max(14px, env(safe-area-inset-left)) !important;
    background: rgba(255,255,255,.94) !important;
    color: var(--cl-text-muted) !important;
    border: 1px solid rgba(226,232,240,.95) !important;
    box-shadow: 0 6px 20px rgba(15,23,42,.10) !important;
}

/* ---------- Pricing / account surfaces (same brand, same rhythm) ---------- */
.clp-wrap,
.clp-admin-wrap { color: var(--cl-text); }
.clp-card,
.clp-panel,
.clp-how-step,
.clp-site-picker { border-color: var(--cl-border) !important; box-shadow: var(--cl-shadow-sm) !important; }
.clp-hero,
.clp-admin-hero,
.clp-welcome { background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important; box-shadow: 0 18px 45px rgba(79,70,229,.18) !important; }
.clp-cta-solid { background: linear-gradient(135deg, var(--cl-primary), var(--cl-secondary)) !important; }
.clp-cta-ghost { border-color: var(--cl-primary-border) !important; color: #4338ca !important; }
.clp-co-close { background: #f8fafc !important; border: 1px solid var(--cl-border) !important; color: var(--cl-text-muted) !important; }

/* ---------- Mobile ergonomics ---------- */
@media (max-width: 782px) {
    .chamelearn-container .sm-details-tabs,
    .chamelearn-dashboard .sm-details-tabs {
        margin-inline: -2px;
        padding: 3px;
        gap: 3px;
    }
    .chamelearn-container .sm-tab-btn,
    .chamelearn-dashboard .sm-tab-btn { min-height: 42px; padding-inline: 13px; }
    .chamelearn-container .chamelearn-btn,
    .chamelearn-dashboard .chamelearn-btn { min-height: 44px; }
    .chamelearn-container .chamelearn-modal-content { width: min(100%, calc(100vw - 24px)) !important; max-height: calc(100dvh - 24px) !important; }
    #chamelearn-floating-interface { width: calc(100vw - 20px) !important; max-height: calc(100dvh - 20px) !important; }
}
@media (max-width: 480px) {
    .chamelearn-dashboard { padding: 10px !important; }
    .chamelearn-dashboard-header { border-radius: 16px !important; }
    .chamelearn-container .sm-start-lesson-btn { width: 100%; font-size: 17px; }
    .chamelearn-container .sm-close-btn { top: max(12px, env(safe-area-inset-top)) !important; inset-inline-start: max(12px, env(safe-area-inset-left)) !important; }
}

@media (prefers-reduced-motion: reduce) {
    .chamelearn-container *,
    .chamelearn-dashboard * { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}


/* =====================================================================
 * ChameLearn Master UI System — final visual normalization
 * UI ONLY: preserves existing IDs, classes, DOM hooks, JS, AJAX and data.
 * Based on UI/UX Pro Max principles: consistent palette, spacing rhythm,
 * elevation, focus states, touch targets, responsive behavior and motion.
 * ===================================================================== */
:root {
    --cl-primary: #4f46e5;
    --cl-primary-hover: #4338ca;
    --cl-primary-soft: #eef2ff;
    --cl-primary-border: #c7d2fe;
    --cl-secondary: #7c3aed;
    --cl-secondary-soft: #f5f3ff;
    --cl-accent: #0891b2;
    --cl-success: #059669;
    --cl-success-soft: #ecfdf5;
    --cl-warning: #b45309;
    --cl-warning-soft: #fffbeb;
    --cl-danger: #dc2626;
    --cl-danger-soft: #fef2f2;
    --cl-info: #2563eb;
    --cl-info-soft: #eff6ff;
    --cl-bg: #f8fafc;
    --cl-surface: #ffffff;
    --cl-surface-subtle: #f1f5f9;
    --cl-border: #e2e8f0;
    --cl-border-strong: #cbd5e1;
    --cl-text: #0f172a;
    --cl-text-secondary: #334155;
    --cl-text-muted: #64748b;
    --cl-radius-xs: 6px;
    --cl-radius-sm: 8px;
    --cl-radius-md: 10px;
    --cl-radius-lg: 14px;
    --cl-radius-xl: 18px;
    --cl-shadow-xs: 0 1px 2px rgba(15,23,42,.04);
    --cl-shadow-sm: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
    --cl-shadow-md: 0 8px 24px rgba(15,23,42,.08);
    --cl-shadow-lg: 0 18px 45px rgba(15,23,42,.12);
    --cl-focus: 0 0 0 3px rgba(79,70,229,.20);
    --cl-ease: cubic-bezier(.2,.8,.2,1);
}

/* Scope the visual system to ChameLearn surfaces so WordPress/admin UI is not affected. */
.chamelearn-container,
.chamelearn-dashboard,
.clp-wrap,
.clp-admin-wrap,
.chamelearn-my-plan { color: var(--cl-text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.chamelearn-container *, .chamelearn-dashboard *, .clp-wrap *, .clp-admin-wrap *, .chamelearn-my-plan * { box-sizing: border-box; }

/* One spacing/elevation language. */
.chamelearn-container .section-card,
.chamelearn-container .sm-subject-card,
.chamelearn-container .sm-score-card,
.chamelearn-container .sm-student-lesson-item,
.chamelearn-dashboard .sm-section,
.chamelearn-dashboard .sm-subject-card,
.chamelearn-dashboard .sm-student-card,
.chamelearn-dashboard .sm-focus-card,
.chamelearn-dashboard .sm-score-card,
.chamelearn-dashboard .chamelearn-lesson-item,
.chamelearn-dashboard .sm-student-item,
.chamelearn-my-plan .plan-card {
    border: 1px solid var(--cl-border) !important;
    box-shadow: var(--cl-shadow-sm) !important;
}

/* Primary/secondary/danger hierarchy. Red is reserved for destructive/error states. */
.chamelearn-container .chamelearn-btn-primary,
.chamelearn-dashboard .chamelearn-btn-primary,
.chamelearn-container .sm-start-lesson-btn,
.chamelearn-container .action-btn.exercises-btn,
.chamelearn-dashboard .action-btn.exercises-btn,
.chamelearn-container .chamelearn-lesson-button-container .chamelearn-btn-primary {
    background: linear-gradient(135deg,var(--cl-primary),var(--cl-secondary)) !important;
    color:#fff !important; border:1px solid transparent !important;
    box-shadow:0 6px 18px rgba(79,70,229,.18) !important;
}
.chamelearn-container .chamelearn-btn-primary:hover,
.chamelearn-dashboard .chamelearn-btn-primary:hover,
.chamelearn-container .sm-start-lesson-btn:hover,
.chamelearn-container .action-btn.exercises-btn:hover {
    background:linear-gradient(135deg,var(--cl-primary-hover),#6d28d9) !important;
    transform:translateY(-1px) !important;
    box-shadow:0 9px 22px rgba(79,70,229,.22) !important;
}
.chamelearn-container .chamelearn-btn-secondary,
.chamelearn-dashboard .chamelearn-btn-secondary { background:#fff !important; color:var(--cl-primary-hover) !important; border:1px solid var(--cl-primary-border) !important; box-shadow:var(--cl-shadow-xs) !important; }
.chamelearn-container .chamelearn-btn-secondary:hover,
.chamelearn-dashboard .chamelearn-btn-secondary:hover { background:var(--cl-primary-soft) !important; border-color:#a5b4fc !important; }
.chamelearn-container .chamelearn-btn-ghost,
.chamelearn-dashboard .chamelearn-btn-ghost { background:var(--cl-surface-subtle) !important; color:var(--cl-text-secondary) !important; border:1px solid var(--cl-border) !important; }
.chamelearn-container .chamelearn-btn-danger,
.chamelearn-dashboard .chamelearn-btn-danger { background:var(--cl-danger) !important; color:#fff !important; border-color:transparent !important; }
.chamelearn-container .action-btn.mindmap-btn { background:linear-gradient(135deg,#059669,#0891b2) !important; }
.chamelearn-container .action-btn.view-btn { background:#b45309 !important; }

/* All interactive controls: >=44px touch target and calm motion. */
.chamelearn-container button,
.chamelearn-container a,
.chamelearn-dashboard button,
.chamelearn-dashboard a { -webkit-tap-highlight-color:transparent; }
.chamelearn-container .chamelearn-btn,
.chamelearn-dashboard .chamelearn-btn,
.chamelearn-container .chamelearn-btn-sm,
.chamelearn-dashboard .chamelearn-btn-sm,
.chamelearn-container .action-btn { transition:background-color .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s var(--cl-ease),transform .18s var(--cl-ease) !important; }

/* Close controls: identical visual treatment everywhere, including the top-right controls. */
.chamelearn-container .sm-close,
.chamelearn-container .sm-close-btn,
.chamelearn-container .modal-close,
.chamelearn-container .close-floating-interface,
.chamelearn-container #sm-close-student-interface,
.chamelearn-dashboard .sm-close,
.chamelearn-dashboard .modal-close,
.clp-co-close {
    width:40px !important; height:40px !important; min-width:40px !important; min-height:40px !important;
    padding:0 !important; display:inline-flex !important; align-items:center !important; justify-content:center !important;
    border-radius:10px !important; background:#fff !important; border:1px solid var(--cl-border) !important;
    color:var(--cl-text-muted) !important; box-shadow:var(--cl-shadow-xs) !important;
    font-size:18px !important; line-height:1 !important; transform:none !important;
    transition:background-color .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease !important;
}
.chamelearn-container .sm-close:hover,
.chamelearn-container .sm-close-btn:hover,
.chamelearn-container .modal-close:hover,
.chamelearn-container .close-floating-interface:hover,
.chamelearn-container #sm-close-student-interface:hover,
.chamelearn-dashboard .sm-close:hover,
.chamelearn-dashboard .modal-close:hover,
.clp-co-close:hover { background:var(--cl-danger-soft) !important; border-color:#fecaca !important; color:var(--cl-danger) !important; box-shadow:var(--cl-shadow-sm) !important; }

/* Tabs: predictable navigation, no jumping, horizontal overflow only where required. */
.chamelearn-container .sm-details-tabs,
.chamelearn-dashboard .sm-details-tabs {
    display:flex !important; align-items:center !important; gap:4px !important; padding:4px !important; margin:0 0 20px !important;
    background:var(--cl-surface-subtle) !important; border:1px solid var(--cl-border) !important; border-radius:var(--cl-radius-lg) !important;
    overflow-x:auto !important; overflow-y:hidden !important; overscroll-behavior-x:contain; scrollbar-width:thin;
}
.chamelearn-container .sm-tab-btn,
.chamelearn-dashboard .sm-tab-btn {
    flex:0 0 auto !important; min-height:44px !important; padding:10px 16px !important; border:0 !important;
    border-radius:var(--cl-radius-md) !important; background:transparent !important; color:var(--cl-text-muted) !important;
    font-size:13px !important; font-weight:700 !important; line-height:1.2 !important; white-space:nowrap !important;
    transition:background-color .18s ease,color .18s ease,box-shadow .18s ease !important;
}
.chamelearn-container .sm-tab-btn:hover,
.chamelearn-dashboard .sm-tab-btn:hover { background:#fff !important; color:var(--cl-primary-hover) !important; }
.chamelearn-container .sm-tab-btn.active,
.chamelearn-dashboard .sm-tab-btn.active { background:#fff !important; color:var(--cl-primary-hover) !important; box-shadow:var(--cl-shadow-xs) !important; }
.chamelearn-container .sm-tab-btn.active::after,
.chamelearn-dashboard .sm-tab-btn.active::after { content:''; display:block; height:2px; margin:5px 8px 0; border-radius:999px; background:linear-gradient(90deg,var(--cl-primary),var(--cl-secondary)); }
.chamelearn-container .sm-tab-content.active,
.chamelearn-dashboard .sm-tab-content.active { animation:clMasterTabIn .2s var(--cl-ease) both !important; }
@keyframes clMasterTabIn { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:translateY(0)} }

/* Forms. */
.chamelearn-container input:not([type="checkbox"]):not([type="radio"]),
.chamelearn-container select,
.chamelearn-container textarea,
.chamelearn-dashboard input:not([type="checkbox"]):not([type="radio"]),
.chamelearn-dashboard select,
.chamelearn-dashboard textarea { border:1px solid var(--cl-border-strong) !important; border-radius:var(--cl-radius-md) !important; color:var(--cl-text) !important; background:#fff !important; box-shadow:var(--cl-shadow-xs) !important; }
.chamelearn-container input:focus,
.chamelearn-container select:focus,
.chamelearn-container textarea:focus,
.chamelearn-dashboard input:focus,
.chamelearn-dashboard select:focus,
.chamelearn-dashboard textarea:focus { border-color:#818cf8 !important; box-shadow:var(--cl-focus) !important; outline:none !important; }

/* Keyboard focus. */
.chamelearn-container button:focus-visible,
.chamelearn-container a:focus-visible,
.chamelearn-container input:focus-visible,
.chamelearn-container select:focus-visible,
.chamelearn-container textarea:focus-visible,
.chamelearn-dashboard button:focus-visible,
.chamelearn-dashboard a:focus-visible,
.chamelearn-dashboard input:focus-visible,
.chamelearn-dashboard select:focus-visible,
.chamelearn-dashboard textarea:focus-visible { outline:2px solid #818cf8 !important; outline-offset:2px !important; box-shadow:var(--cl-focus) !important; }

/* Modals / overlays. */
.chamelearn-container .chamelearn-modal,
.chamelearn-container .sm-float-modal { background:rgba(15,23,42,.50) !important; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
.chamelearn-container .chamelearn-modal-content,
.chamelearn-container .sm-float-modal-content { border:1px solid var(--cl-border) !important; border-radius:var(--cl-radius-xl) !important; box-shadow:var(--cl-shadow-lg) !important; background:#fff !important; }
.chamelearn-container .chamelearn-modal-header,
.chamelearn-container .sm-float-modal-header { border-bottom:1px solid var(--cl-border) !important; }

/* Progress / semantic states. */
.chamelearn-container .sm-progress-bar,
.chamelearn-dashboard .sm-progress-bar { background:var(--cl-border) !important; border-radius:999px !important; overflow:hidden; }
.chamelearn-container .sm-progress-fill.lesson-progress,
.chamelearn-dashboard .sm-progress-fill.lesson-progress { background:linear-gradient(90deg,var(--cl-primary),var(--cl-secondary)) !important; }
.chamelearn-container .sm-progress-fill.exercise-progress,
.chamelearn-dashboard .sm-progress-fill.exercise-progress { background:linear-gradient(90deg,var(--cl-success),var(--cl-accent)) !important; }

/* Dashboard / account / pricing: same surfaces and elevation. */
.chamelearn-dashboard { background:var(--cl-bg) !important; }
.chamelearn-dashboard-header,
.clp-admin-hero,
.clp-welcome,
.plan-header { background:linear-gradient(135deg,#4338ca 0%,#7c3aed 100%) !important; box-shadow:var(--cl-shadow-lg) !important; }
.clp-card,.clp-panel,.clp-how-step,.clp-site-picker,.clp-admin-card { border-color:var(--cl-border) !important; box-shadow:var(--cl-shadow-sm) !important; }
.clp-card:hover { border-color:var(--cl-primary-border) !important; box-shadow:var(--cl-shadow-md) !important; }
.clp-site-option,.clp-cta-solid { background:linear-gradient(135deg,var(--cl-primary),var(--cl-secondary)) !important; border-color:var(--cl-primary) !important; color:#fff !important; }
.clp-cta-ghost { color:var(--cl-primary-hover) !important; border-color:var(--cl-primary-border) !important; background:#fff !important; }

/* Static red primary actions/alerts that are not destructive: normalize common legacy CTA selectors. */
.chamelearn-container .chamelearn-lesson-button-container button:not(.chamelearn-btn-danger),
.chamelearn-dashboard .chamelearn-lesson-button-container button:not(.chamelearn-btn-danger) { background:linear-gradient(135deg,var(--cl-primary),var(--cl-secondary)) !important; color:#fff !important; border-color:transparent !important; }

/* Responsive rhythm: 375 / 480 / 768 / 1024+ without changing functional breakpoints. */
@media (max-width:1024px) {
    .chamelearn-dashboard { padding:clamp(14px,2vw,24px) !important; }
}
@media (max-width:782px) {
    .chamelearn-container .sm-details-tabs,.chamelearn-dashboard .sm-details-tabs { margin-inline:0 !important; }
    .chamelearn-container .sm-tab-btn,.chamelearn-dashboard .sm-tab-btn { min-height:44px !important; padding-inline:14px !important; }
    .chamelearn-container .chamelearn-btn,.chamelearn-dashboard .chamelearn-btn { min-height:44px !important; }
    .chamelearn-container .chamelearn-modal-content,.chamelearn-container .sm-float-modal-content { width:min(100%,calc(100vw - 24px)) !important; max-height:calc(100dvh - 24px) !important; }
    .clp-wrap { padding:32px 14px 56px !important; }
    .clp-grid { grid-template-columns:1fr !important; }
    .clp-site-options { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
    .clp-admin-wrap { margin-inline:12px !important; }
}
@media (max-width:480px) {
    .chamelearn-dashboard { padding:10px !important; }
    .chamelearn-container .sm-tab-btn,.chamelearn-dashboard .sm-tab-btn { padding-inline:12px !important; font-size:12px !important; }
    .chamelearn-container .sm-start-lesson-btn { width:100% !important; }
    .clp-site-options { grid-template-columns:1fr !important; }
}
@media (prefers-reduced-motion:reduce) {
    .chamelearn-container *, .chamelearn-dashboard *, .clp-wrap *, .clp-admin-wrap *, .chamelearn-my-plan * { scroll-behavior:auto !important; animation-duration:.01ms !important; transition-duration:.01ms !important; }
}