/* ==========================================
   ************** 1. الخطوط المحلية **************
   ========================================== */
@font-face {
    font-family: 'CairoLocal';
    src: url('Cairo-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'AlMohanadLocal';
    src: url('al-mohanad.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* ==========================================
   ************** 2. التنسيقات الأساسية (Base) **************
   ========================================== */
body {
    font-family: 'CairoLocal', sans-serif !important;
    line-height: 1.4;
}

/* منع الخطوط العربية من السيطرة على أيقونات Font Awesome */
i, .fa, .fas, .fab, .far {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", sans-serif !important;
    font-style: normal !important;
}

[dir="rtl"] { text-align: right; }

/* فئات عامة للاتجاه */
.ltr-text { direction: ltr; text-align: left; }
.rtl-text { direction: rtl; text-align: right; }

/* ==========================================
   ************** 3. بطاقات الأسئلة **************
   ========================================== */
.question-card, .qa-concept-card {
    transition: transform .18s ease, box-shadow .18s ease;
    border-radius: 14px;
}
.question-card { border: 1px solid #d1d5db; }
.qa-concept-card { border: 1px solid #60a5fa; }

.question-card:hover, .qa-concept-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(16,24,40,0.06);
}
.dark .question-card:hover, .dark .qa-concept-card:hover {
    box-shadow: 0 8px 20px rgba(0,0,0,0.5);
}

/* إطارات الحالة */
.frame-neutral { border: 1px solid #d1d5db !important; }
.frame-red    { border: 1px solid #ef4444 !important; }
.frame-green  { border: 1px solid #10b981 !important; }
.frame-yellow { border: 1px solid #f59e0b !important; }
.frame-blue   { border: 1px solid #3b82f6 !important; }
.frame-purple { border: 1px solid #8b5cf6 !important; }

/* ==========================================
   ************** 4. أزرار الخيارات **************
   ========================================== */
.option-btn {
    transition: transform .08s ease, background .18s ease, border-color .18s ease, opacity .2s ease;
    direction: rtl;
    text-align: right;
}
.option-btn:active { transform: scale(.99); }
.option-btn:disabled { cursor: default; }
.option-btn.faded { opacity: .55; }

.option-label {
    min-width: 32px; min-height: 32px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 9999px; background: #e0f7fa; color: #059669;
    font-weight: 700; font-size: 0.8rem;
    flex-shrink: 0; margin-left: 0.75rem;
}
.option-btn .flex-1 { direction: rtl; text-align: right; }

/* الحالات: صحيح / خطأ */
.is-correct {
    background: #ecfdf5 !important;
    border-color: #4ade80 !important;
    color: #065f46 !important;
}
.dark .is-correct {
    background: #064e3b !important;
    border-color: #34d399 !important;
    color: #a7f3d0 !important;
}
.is-wrong {
    background: #fff1f2 !important;
    border-color: #f87171 !important;
    color: #7f1d1d !important;
}
.dark .is-wrong {
    background: #7f1d1d !important;
    border-color: #fca5a5 !important;
    color: #fecaca !important;
}
.is-correct .option-label { background: #16a34a !important; color: white !important; }
.is-wrong .option-label   { background: #dc2626 !important; color: white !important; }

/* تحسينات إضافية للخيارات الصحيحة والخاطئة */
.option-btn.is-correct {
    background-color: #ecfdf5 !important;
    border-color: #059669 !important;
    border-width: 1px !important;
    opacity: 1 !important;
    box-shadow: 0 4px 6px -1px rgba(16, 185, 129, 0.2);
}
.option-btn.is-wrong {
    background-color: #fff1f2 !important;
    border-color: #e11d48 !important;
    opacity: 0.9 !important;
}
.dark .option-btn.is-correct {
    background-color: rgba(6, 78, 59, 0.4) !important;
    border-color: #34d399 !important;
    color: #ecfdf5 !important;
}
.dark .option-btn.is-wrong {
    background-color: rgba(159, 18, 57, 0.4) !important;
    border-color: #fb7185 !important;
    color: #fff1f2 !important;
}

/* اختيار متعدد */
.multi-selected {
    background: rgba(59, 130, 246, 0.2) !important;
    border-color: #3b82f6 !important;
}
.dark .multi-selected {
    background: rgba(59, 130, 246, 0.3) !important;
    border-color: #3b82f6 !important;
}

/* أزرار التحقق متعدد */
.check-multi-btn.disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    background-color: #9ca3af !important;
}
.check-multi-btn.enabled {
    opacity: 1 !important;
    cursor: pointer !important;
    background-color: #059669 !important;
}

/* ==========================================
   ************** 5. الشريط العلوي الثابت **************
   ========================================== */
#fixedTopBar {
    position: fixed; width: 100%; top: 0;
    padding: 4px 10px; min-height: 44px;
    background-color: rgba(255, 255, 255, 0.98);
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    backdrop-filter: blur(4px);
    border-bottom: 1px solid #e2e8f0;
    z-index: 9999;
}
.dark #fixedTopBar {
    background-color: rgba(17, 24, 39, 0.98);
    border-bottom: 1px solid #374151;
    box-shadow: 0 1px 4px rgba(0,0,0,0.5);
    color: #f3f4f6;
}

#progressFillTop {
    transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.shimmer-effect {
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transform: translateX(-100%); pointer-events: none;
}
.animate-shimmer { animation: progress-shimmer 2s ease-in-out; }
@keyframes progress-shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* ==========================================
   ************** 6. البحث الذكي (Search) **************
   ========================================== */
.search-highlight {
    background-color: #fef08a;
    color: #1e293b;
    padding: 2px 4px;
    border-radius: 3px;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.search-highlight-input {
    background-color: rgba(254, 240, 138, 0.2) !important;
    border-color: #eab308 !important;
    box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.1) !important;
}
.search-match-highlight {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}
#searchResultsInfo {
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border: 1px solid #93c5fd;
    color: #1e40af;
}
.dark .search-highlight {
    background-color: #854d0e;
    color: #fef9c3;
}
.dark .search-highlight-input {
    background-color: rgba(133, 77, 14, 0.2) !important;
    border-color: #a16207 !important;
}
.dark .search-match-highlight {
    border-color: #60a5fa !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2) !important;
}
.dark #searchResultsInfo {
    background: linear-gradient(135deg, #1e3a5f, #1e40af);
    border-color: #3b82f6;
    color: #bfdbfe;
}

/* ==========================================
   ************** 7. المفضلة (Favorites) **************
   ========================================== */
.favorite-btn {
    transition: all 0.2s ease;
    color: #d1d5db;
}
.favorite-btn.active { color: #f59e0b; text-shadow: 0 0 8px rgba(245, 158, 11, 0.5); }
.favorite-btn:hover { transform: scale(1.1); }

.favorite-card {
    border-color: #f59e0b !important;
    background: linear-gradient(to left, #fffbeb, #fef3c7) !important;
}
.dark .favorite-card {
    background: linear-gradient(to left, #78350f, #92400e) !important;
    border-color: #f59e0b !important;
}

/* ==========================================
   ************** 8. النوافذ المنبثقة (Modals) **************
   ========================================== */
.modal-overlay {
    position: fixed; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(8px);
    z-index: 10000;
    opacity: 0; visibility: hidden;
    transition: 0.25s;
}
.modal-overlay.active { opacity: 1; visibility: visible; }
.modal-content {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    transform: translateY(25px) scale(0.95);
    opacity: 0;
    transition: 0.3s;
    max-height: 90vh; overflow: auto;
    direction: rtl;
}
.modal-overlay.active .modal-content { transform: none; opacity: 1; }
.dark .modal-content {
    background: rgba(17, 24, 39, 0.9);
    border-color: rgba(75, 85, 99, 0.4);
}

/* ==========================================
   ************** 9. إدارة المستخدمين **************
   ========================================== */
.user-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.3s ease;
}
.user-avatar:hover { transform: scale(1.1); }

.user-dropdown {
    position: absolute; top: 100%; left: 0; margin-top: 10px;
    background: white; border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    min-width: 200px; z-index: 50; display: none;
}
.user-dropdown.show { display: block; }
.dark .user-dropdown { background: #1f2937; border-color: #374151; }

.dropdown-item {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px; color: #374151;
    border-bottom: 1px solid #f3f4f6;
}
.dropdown-item:last-child { border-bottom: none; }
.dropdown-item:hover { background: #f9fafb; }
.dark .dropdown-item {
    color: #d1d5db; border-bottom: 1px solid #374151;
}
.dark .dropdown-item:hover { background: #374151; }

/* أيقونات المستخدمين */
.user-icon { transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.user-icon:hover { transform: scale(1.05); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.icon-super_admin { background: linear-gradient(135deg, #f59e0b, #d97706); }
.icon-admin { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.icon-editor { background: linear-gradient(135deg, #10b981, #059669); }
.icon-student { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }

/* ==========================================
   ************** 10. سجل النشاط (Activity Log) **************
   ========================================== */
.activity-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; text-transform: uppercase;
}
.activity-badge-add     { background: rgba(16, 185, 129, 0.1); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.3); }
.activity-badge-edit    { background: rgba(59, 130, 246, 0.1); color: #3b82f6; border: 1px solid rgba(59, 130, 246, 0.3); }
.activity-badge-delete  { background: rgba(239, 68, 68, 0.1); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.3); }
.activity-badge-restore { background: rgba(245, 158, 11, 0.1); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.3); }

.activity-action-btn {
    padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: 500;
    transition: all 0.2s; display: flex; align-items: center; gap: 5px;
    border: none; cursor: pointer; color: white; width: 100%;
}
.activity-action-btn:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.restore-btn            { background: linear-gradient(135deg, #10b981, #059669); }
.delete-permanent-btn   { background: linear-gradient(135deg, #ef4444, #dc2626); }

/* ==========================================
   ************** 11. القراءة الصوتية (TTS) **************
   ========================================== */
.tts-btn {
    transition: all 0.2s ease;
    cursor: pointer;
}
.tts-btn:hover { transform: scale(1.05); }
.tts-btn:active { transform: scale(0.95); }

.tts-controls {
    position: fixed; bottom: 20px; left: 20px; right: 20px;
    z-index: 1000; display: none;
    animation: slideUp 0.3s ease-out;
}
@media (min-width: 768px) {
    .tts-controls { left: auto; right: 20px; width: 380px; }
}
@keyframes slideUp {
    from { transform: translateY(100px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

.speed-dropdown { position: relative; display: inline-block; }
.speed-btn {
    background: #4f46e5; color: white;
    padding: 8px 12px; border-radius: 12px; font-size: 13px; font-weight: bold;
    display: flex; align-items: center; gap: 6px;
    cursor: pointer;
}
.speed-btn:hover { background: #4338ca; transform: scale(1.02); }
.speed-menu {
    position: absolute; bottom: 100%; left: 0; margin-bottom: 8px;
    background: white; border-radius: 12px;
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.2);
    overflow: hidden; min-width: 120px; display: none; z-index: 100;
}
.speed-menu.show { display: block; animation: slideUp 0.2s ease-out; }
.speed-option {
    padding: 8px 16px; cursor: pointer; text-align: center; color: #1f2937;
}
.speed-option:hover { background: #e0e7ff; }
.speed-option.active { background: #4f46e5; color: white; }

.reading-now {
    transform: scale(1.02) !important;
    box-shadow: 0 20px 25px -12px rgba(0,0,0,0.25) !important;
    border: 2px solid #f59e0b !important;
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1) !important;
    position: relative; z-index: 10;
}
.reading-now::before {
    content: "🔊";
    position: absolute; top: -10px; right: -10px;
    background: #f59e0b; color: white;
    border-radius: 50%; width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    animation: pulse 1s infinite;
}
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* ==========================================
   ************** 12. إدارة المحتوى (Content Management) **************
   ========================================== */
#contentFormContainer input,
#contentFormContainer textarea,
#contentFormContainer select { direction: rtl; text-align: right; }
#optionsContainer textarea { direction: rtl; text-align: right; }
#contentFormContainer .peer:checked~div { transform: scale(1.03); }
#contentFormContainer .w-16.h-16:hover { transform: scale(1.05) rotate(4deg); }

/* أزرار الإدارة */
.admin-btn {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: white;
}
.admin-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4); }
.edit-btn { background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); color: white; }
.delete-btn { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); color: white; }

.action-btn {
    padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: bold;
    transition: all 0.2s ease;
    display: flex; align-items: center; gap: 5px;
    border: none; cursor: pointer;
}
.action-btn:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
.action-btn:active { transform: scale(0.95); }

/* ==========================================
   ************** 13. البطاقات المقالية (QA) والمفاهيم **************
   ========================================== */
.qa-concept-card {
    border-right: 5px solid #1e40af !important;
    background: linear-gradient(to left, #ffffff, #fcfcfc);
}
.dark .qa-concept-card {
    background: linear-gradient(to left, #1f2937, #111827);
    border-right-color: #3b82f6 !important;
}
.qa-concept-card p { text-align: justify; text-justify: inter-word; }
.qa-concept-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.02);
}
.qa-concept-card .favorite-btn {
    border-radius: 50%; width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
}
.qa-concept-card .favorite-btn:hover {
    background-color: rgba(139, 92, 246, 0.1);
    transform: scale(1.05);
}
.qa-header-card, .qa-note-card {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    backdrop-filter: blur(4px);
}
.qa-header-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
}
.qa-note-card {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
    color: white !important;
}
.qa-header-card::before, .qa-note-card::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
    pointer-events: none;
}
.qa-header-card:hover::before, .qa-note-card:hover::before {
    transform: translateX(100%);
}
.qa-header-card:hover, .qa-note-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}
.qa-action-buttons { display: flex; gap: 8px; margin-top: 12px; }
.qa-action-buttons button {
    transition: all 0.2s ease;
    font-weight: 600;
}
.qa-action-buttons button:hover { transform: translateY(-2px); }

/* ==========================================
   ************** 14. النماذج والحقول **************
   ========================================== */
.form-input {
    width: 100%; padding: 10px 15px;
    border: 1px solid #d1d5db; border-radius: 8px;
    background: white; color: #1f2937;
    transition: all 0.2s;
}
.form-input:focus {
    outline: none; border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.dark .form-input {
    background: #374151; border-color: #4b5563; color: white;
}
textarea {
    resize: vertical; min-height: 60px; max-height: 400px;
    overflow-y: auto; transition: height 0.2s ease;
}
.password-strength { height: 4px; border-radius: 4px; margin-top: 6px; }
.strength-weak  { background: linear-gradient(90deg, #ef4444 25%, #e5e7eb 0); }
.strength-medium{ background: linear-gradient(90deg, #f59e0b 50%, #e5e7eb 0); }
.strength-strong{ background: linear-gradient(90deg, #10b981 75%, #e5e7eb 0); }
.strength-very-strong { background: #3b82f6; }

.validation-message { font-size: 12px; margin-top: 4px; display: flex; align-items: center; gap: 5px; }
.validation-success { color: #10b981; }
.validation-error   { color: #ef4444; }

/* ==========================================
   ************** 15. معالجة KaTeX والمعادلات الطويلة **************
   ========================================== */
.katex-display {
    direction: ltr !important;
    text-align: center !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    max-width: 100%;
    padding: 0.5rem 0.25rem;
    margin: 1rem 0;
}
.katex-display::-webkit-scrollbar { height: 5px; }
.katex-display::-webkit-scrollbar-thumb { background-color: #94a3b8; border-radius: 4px; }
.dark .katex-display::-webkit-scrollbar-thumb { background-color: #475569; }

.math-rtl { direction: rtl !important; text-align: right !important; }
.math-ltr { direction: ltr !important; text-align: center !important; }
.math-rtl .vlist-t, .math-rtl .vlist-b, .math-rtl .vlist { direction: ltr !important; }

/* النص العربي داخل المعادلات */
.katex .text {
    direction: rtl !important;
    unicode-bidi: embed;
    white-space: nowrap;
}
/* الجداول والمعادلات في إدارة المحتوى */
#contentManagementView .question-card,
#contentManagementView .explanation-section,
#contentManagementView .explanation-text {
    overflow-x: auto !important;
    max-width: 100%;
}
.overflow-x-auto { overflow-x: auto !important; max-width: 100%; }
table {
    min-width: 400px;
    width: 100%;
    border-collapse: collapse;
    margin: 0.5rem 0;
}
@media (max-width: 640px) {
    .explanation-steps table { font-size: 0.7rem; }
    .explanation-steps th, .explanation-steps td { padding: 4px; }
}

/* ==========================================
   ************** 16. الإشعارات (Toast) **************
   ========================================== */
.toast-container {
    position: fixed; top: 20px; right: 20px;
    z-index: 10001;
    display: flex; flex-direction: column; gap: 10px;
}
.toast {
    padding: 12px 20px; border-radius: 10px;
    color: white; font-weight: 500;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    animation: slideIn 0.3s ease-out;
    display: flex; align-items: center; gap: 10px;
}
@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}
.toast-success { background: #10b981; }
.toast-error   { background: #ef4444; }
.toast-warning { background: #f59e0b; }
.toast-info    { background: #3b82f6; }

/* ==========================================================================
   النمط للطباعة (Print) - النسخة الشاملة والمحدثة بالكامل (2026)
   التحديثات: 
   1. معالجة خروج وقص المعادلات العربية من الأعلى والأسفل.
   2. وزن هوامش المعادلات لمنع التباعد المفرط بين الأسطر.
   3. منع العناوين اليتيمة وإجبار انتقال عناوين الوحدات والأسئلة مع محتواها.
   4. التقسيم المرن للإجابات والشروحات الكبيرة لمنع الصفحات الفاضية.
   ========================================================================== */
@media print {
    /* ١. الإعدادات العامة وإجبار الألوان */
    body {
        background: white !important;
        font-family: "AlMohanadLocal", "Sakkal Majalla", serif !important;
        font-size: 16px !important;
        line-height: 1.4 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* إجبار طباعة الألوان والخلفيات لعناصر محددة */
    html, body, 
    .question-title, 
    .question-card .question-title,
    #questionsList .question-title, 
    .question-card h4,
    .qa-concept-card h4, 
    .qa-concept-card .question-title-area,
    .question-title-area,
    .question-card [class*="question-title"],
    .katex, .katex-display, .katex .frac-line,
    .whatsapp-link, .option-label, 
    .favorite-btn,
    .favorite-btn i,
    .favorite-btn svg,
    .option-btn.border-green-500 .option-label,
    .option-btn.border-red-300 .option-label,
    #fixedTopBar,
    .qa-concept-card .inline-flex.items-center.justify-center.bg-blue-600,
    .qa-concept-card span[class*="bg-blue-600"],
    th,
    h1, h2, h3, h4, h5 {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* إزالة الظلال من جميع العناصر غير الرياضية */
    *:not(.katex *):not(.katex-display *) {
        box-shadow: none !important;
        text-shadow: none !important;
    }

    @page {
        margin: 1cm 1.5cm 1.5cm 1.5cm !important;
        size: auto !important;
    }

    .container, .content-area, main, #questionsView {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* ٢. نظام التلوين المحدث ومنع العناوين اليتيمة */
    h1, h2, .question-card h2 {
        color: #064e3b !important; /* أخضر زمردي فخم لعناوين الماركدون الرئيسية # */
        font-weight: bold !important;
        font-family: "AlMohanadLocal", "Sakkal Majalla", serif !important;
        background-color: transparent !important;
        page-break-after: avoid !important;
        break-after: avoid !important; /* يمنع بقاء العنوان وحيداً في أسفل الصفحة */
    }

    h3, .question-card h3 {
        color: #166534 !important; /* أخضر غامق متناسق للعناوين الفرعية ## */
        font-weight: bold !important;
        page-break-after: avoid !important;
        break-after: avoid !important;
    }

    h4, .question-card h4, .qa-concept-card h4, .question-title-area h4 {
        color: #047857 !important; /* أخضر عشبي هادئ للعناوين الصغيرة ### */
        font-weight: bold !important;
        page-break-after: avoid !important;
        break-after: avoid !important;
    }

    h5, .question-card h5 {
        color: #1a1a1a !important;
        font-weight: bold !important;
        page-break-after: avoid !important;
        break-after: avoid !important;
    }

    /* الحفاظ على تلوين نصوص الأسئلة التقليدية وبطاقات الكويز باللون الأزرق النقي */
    .question-title,
    .question-card .question-title,
    #questionsList .question-title,
    .qa-concept-card .question-title-area,
    .question-title-area,
    .question-card [class*="question-title"],
    #unitTitleTop, .main-unit-header {
        color: #0D47A1 !important;
        font-weight: bold !important;
        font-family: "AlMohanadLocal", "Sakkal Majalla", serif !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        page-break-after: avoid !important;
        break-after: avoid !important; /* سحب عنوان السؤال أو الوحدة تلقائياً مع المحتوى */
    }

    /* تلوين جميع الفقرات والنصوص الداخلية التابعة لأسئلة الكويز بالأزرق */
    .question-title p,
    .question-title-area p,
    .question-card .question-title p,
    .qa-concept-card .question-title-area p,
    .question-title *,
    .question-title-area *,
    .question-card .question-title *,
    .qa-concept-card .question-title-area * {
        color: #0D47A1 !important;
        font-weight: bold !important;
    }

    /* ٣. الشريط العلوي + تاريخ الطباعة */
    #unitTitleTop {
        font-size: 24px !important;
        font-weight: bold !important;
        color: #0B3D91 !important;
        text-align: right !important;
        margin: 0 0 10px 0 !important;
        padding: 0 !important;
    }

    #fixedTopBar {
        display: block !important;
        visibility: visible !important;
        position: relative !important;
        padding: 0.5rem 0 0.8rem 0 !important;
        margin: 0 0 10px 0 !important;
        text-align: right !important;
        background-color: #f7f7f7 !important;
        border-bottom: 1px solid #ccc !important;
        font-family: "AlMohanadLocal", "Sakkal Majalla", serif !important;
        -webkit-print-color-adjust: exact !important;
    }

    #fixedTopBar::after {
        content: "إعداد/ أبو علي | تاريخ الطباعة: " attr(data-print-date) !important;
        display: block !important;
        visibility: visible !important;
        margin-top: 8px !important;
        font-weight: bold !important;
        color: #1A73E8 !important;
        font-size: 16px !important;
        background: none !important;
        text-align: center !important;
    }

    /* ٤. الملاحظة والتوقيع */
    #authorSignature {
        display: block !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        page-break-after: always !important;
        break-after: always !important;
        margin: 10px 0 0 0 !important;
        padding: 10px !important;
        border: 2px solid #0D47A1 !important;
        border-radius: 8px !important;
        background-color: #E3F2FD !important;
        font-family: "AlMohanadLocal", "Sakkal Majalla", serif !important;
    }

    #authorSignature *,
    .main-note-container,
    .author-info-container,
    .note-content-list {
        background-color: transparent !important;
        background: transparent !important;
    }

    /* زر التواصل (واتساب) */
    .whatsapp-link {
        display: inline-flex !important;
        visibility: visible !important;
        background-color: #25D366 !important;
        color: #0D47A1 !important;
        padding: 6px 12px !important;
        border-radius: 8px !important;
        text-decoration: none !important;
        font-weight: bold !important;
        margin-top: 5px !important;
    }

    /* ٥. بطاقات الأسئلة (السماح بالانقسام الذكي لمنع الصفحات الفارغة) */
    .question-card, .qa-concept-card {
        background-color: white !important;
        border: 1px solid #ddd !important;
        border-radius: 6px !important;
        padding: 6px 8px !important;
        margin: 4px 0 !important;
        width: 100% !important;
        page-break-inside: auto !important;
        break-inside: auto !important; /* تفعيل الانقسام الذكي للإجابات الكبيرة بدلاً من ترك فراغات ضخمة */
    }

    /* ٦. شبكة الخيارات */
    .options-grid {
        display: grid !important;
        gap: 4px !important;
        margin: 2px 0 !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important; /* منع انقسام شبكة الخيارات */
    }

    @media (orientation: portrait) {
        .options-grid { grid-template-columns: repeat(2, 1fr) !important; }
    }
    @media (orientation: landscape) {
        .options-grid { grid-template-columns: repeat(4, 1fr) !important; }
    }

    /* نمط الخيارات العامة للطباعة */
    .option-btn {
        padding: 4px 6px !important;
        font-size: 13px !important;
        background: white !important;
        border: 1px solid #aaa !important;
        color: black !important;
        position: relative !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    .option-label {
        min-width: 20px !important;
        min-height: 20px !important;
        font-size: 12px !important;
        background-color: #ccc !important;
        color: black !important;
        border: 1px solid #888 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        visibility: visible !important;
    }

    /* تمييز الخيارات الصحيحة بعلامة ✓ */
    .option-btn.border-green-500,
    .option-btn.is-correct {
        border: 1px solid #10b981 !important;
        background-color: #f0fdf4 !important;
        position: relative !important;
    }
    .option-btn.border-green-500 .option-label,
    .option-btn.is-correct .option-label {
        background-color: #10b981 !important;
        color: white !important;
        border: none !important;
        display: inline-flex !important;
        visibility: visible !important;
    }

    .option-btn.border-green-500::after,
    .option-btn.is-correct::after {
        content: " ✓" !important;
        display: inline !important;
        visibility: visible !important;
        color: #10b981 !important;
        font-weight: bold !important;
        font-size: 16px !important;
        position: relative !important;
        top: 2px !important;
        margin-right: 4px !important;
        vertical-align: baseline !important;
    }

    /* تمييز الخيارات الخاطئة بعلامة ✗ */
    .option-btn.border-red-300,
    .option-btn.is-wrong {
        border: 1px solid #ef4444 !important;
        background-color: #fef2f2 !important;
        position: relative !important;
    }
    .option-btn.border-red-300 .option-label,
    .option-btn.is-wrong .option-label {
        background-color: #ef4444 !important;
        color: white !important;
        border: none !important;
        display: inline-flex !important;
        visibility: visible !important;
    }

    .option-btn.border-red-300::after,
    .option-btn.is-wrong::after {
        content: " ✗" !important;
        display: inline !important;
        visibility: visible !important;
        color: #ef4444 !important;
        font-weight: bold !important;
        font-size: 16px !important;
        position: relative !important;
        top: 2px !important;
        margin-right: 4px !important;
        vertical-align: baseline !important;
    }

    /* ٧. المعادلات والرموز الرياضية - الموزونة والمدمجة (حماية الحروف العربية + هوامش ضيقة) */
    .katex-display {
        color: #1565C0 !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        overflow-x: auto !important;
        overflow-y: visible !important; /* حماية تامة من قطع الحروف العلوية بدون مساحات */
        max-width: 100% !important;
        text-align: center !important;
        padding: 2px 0 !important; /* تقليص الحشو الداخلي لأقل حد ممكن */
        margin: 2px 0 !important;  /* تقليص الهامش لتقريب السطور والنصوص المحيطة */
    }

    .katex {
        color: #1565C0 !important;
        max-width: 100% !important;
        font-size: 1.05em !important;
        line-height: 1.2 !important; /* تقليص معدل الارتفاع المفرط لعدم تباعد الأسطر */
    }

    /* الحفاظ على الـ flex لسلامة اصطفاف الأرقام أفقياً */
    .katex .katex-html {
        max-width: 100% !important;
        display: inline-flex !important; 
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        row-gap: 0.2em !important; /* تضييق الفجوات الداخلية للمسألة */
        padding-top: 3px !important; /* حماية علوية خفيفة جداً ومباشرة لكلمات البسط العربي */
        padding-bottom: 1px !important;
    }

    /* ضبط العناصر الداخلية للكسور لتكون متراصة ومحمية */
    .katex .base {
        display: inline-flex !important;
        align-items: center !important;
        padding-top: 1px !important;
        padding-bottom: 1px !important;
    }

    .katex * { 
        color: #1565C0 !important; 
        text-shadow: none !important;
        border-color: #1565C0 !important;
    }

    .katex .frac-line {
        border-bottom-style: solid !important;
        border-bottom-width: 2px !important; 
        border-bottom-color: #1565C0 !important;
        background-color: #1565C0 !important; 
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .katex path {
        stroke: #1565C0 !important;
        fill: #1565C0 !important;
    }

    .katex .katex-mathml, 
    .katex .katex-html {
        font-weight: bold !important;
    }

    /* ========== الجداول (حدود كاملة ومحمية من الانقسام) ========== */
    table {
        width: 100% !important;
        border-collapse: collapse !important;
        margin: 0.5rem 0 !important;
        page-break-inside: auto !important;
        background-color: white !important;
        border: 2px solid #000 !important; 
    }
    thead {
        display: table-header-group !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    th, td {
        border: 1px solid #000 !important; 
        word-wrap: break-word !important;
        word-break: break-word !important;
    }
    th {
        background-color: #d1d5db !important;
        color: #000 !important;
        font-weight: bold !important;
        padding: 8px 10px !important;
        text-align: right !important;
    }
    td {
        background-color: white !important;
        color: #000 !important;
        padding: 6px 8px !important;
        vertical-align: top !important;
        text-align: right !important;
    }
    tr {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        page-break-after: auto !important;
        break-after: auto !important;
    }

    /* ٨. مناطق الشرح والتفسير (تسمح بالانقسام بين الصفحات مع حماية الأسطر المفردة) */
    .result-area, .explanation-area, .qa-concept-card .answer-content {
        margin-top: 2px !important;
        padding-top: 0 !important;
        page-break-inside: auto !important;
        break-inside: auto !important;
    }

    .result-area > div {
        margin-top: 0 !important;
        padding-top: 2px !important;
    }

    /* حماية الأسطر والنصوص الطويلة المنقسمة من الانعزال */
    p, div, span:not(.katex *) {
        orphans: 3 !important; /* يمنع ظهور أقل من 3 أسطر وحيدة بآخر الصفحة */
        widows: 3 !important;  /* يمنع ظهور أقل من 3 أسطر وحيدة بأول الصفحة التالية */
        margin: 4px 0 !important;
        line-height: 1.3 !important;
    }

    /* ٩. تلوين رقم السؤال المقالي */
    .qa-concept-card .inline-flex.items-center.justify-center.bg-blue-600,
    .qa-concept-card span[class*="bg-blue-600"] {
        background-color: #1e40af !important;
        color: white !important;
        border-radius: 0.5rem !important;
        padding: 0.25rem 0.75rem !important;
        font-weight: bold !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* ١٠. ألوان الإطارات الجانبية للبطاقات */
    .qa-concept-card.frame-green { border-right: 4px solid #10b981 !important; }
    .qa-concept-card.frame-red { border-right: 4px solid #ef4444 !important; }
    .qa-concept-card.frame-yellow { border-right: 4px solid #f59e0b !important; }
    .qa-concept-card.frame-purple { border-right: 4px solid #8b5cf6 !important; }

    .qa-concept-card .answer-content {
        background-color: white !important;
        color: #1f2937 !important;
        border: none !important;
    }

    /* ١١. إخفاء أزرار الصوت والتعديل */
    .play-qa-question-only,
    .play-qa-answer-only,
    .edit-qa-question-btn,
    .tts-btn,
    .play-single-question {
        display: none !important;
    }

    /* ١٢. إخفاء العناصر غير الضرورية */
    header, footer, nav,
    .controls-panel, .action-buttons, .save-button, .print-button,
    .back-button, .next-button, .score-summary, .summary-box,
    .modal-background, .modal-content, .check-btn, .check-multi-btn,
    .alert-box, .notification-box, .hidden-print,
    #toggleSolutionsBtn, #backToUnitsTop, #resetUnitTop,
    #printQuestionsBtn, #solutionsControl, #solutionsTextInProgress,
    #unitProgressTop, #quizCompletionSummary, #menuButton,
    #dropdownMenu, #themeToggle, #mainHeader, #practiceRoundSummary,
    #ttsReadPageBtn, #pauseSpeechBtn, #resumeSpeechBtn, #stopSpeechBtn,
    .tts-controls, .speed-dropdown, .speed-btn, .speed-menu,
    button[onclick*="speakSingleQuestion"], button[onclick*="startReadingFromQuestion"],
    .edit-question-btn, .edit-btn,
    .action-btn.edit-btn, .delete-btn,
    .action-btn.delete-btn, #addNewQuestionBtn, .admin-btn,
    #editNotesBtn, .edit-notes-btn, button[onclick*="showNotesManagementModal"],
    div.mt-3.p-3.bg-purple-50, div[class*="bg-purple-50"],
    textarea, input[type="text"], input[type="email"], input[type="password"],
    input[type="number"], input:not([type="checkbox"]):not([type="radio"]),
    .question-card textarea, .question-card input,
    .qa-concept-card textarea {
        display: none !important;
    }

    /* إخفاء أزرار البطاقات عدا المفضلة والواتساب */
    .question-card button:not(.option-btn):not(.favorite-btn),
    .qa-concept-card button:not(.favorite-btn) {
        display: none !important;
    }

    /* إظهار زر المفضلة وضمان وضوح النجمة */
    .favorite-btn {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        height: auto !important;
        background-color: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        margin: 0 4px !important;
        padding: 2px !important;
    }

    .favorite-btn i,
    .favorite-btn svg,
    .fa-star {
        display: inline-block !important;
        visibility: visible !important;
        font-size: 16px !important;
        color: #d1d5db !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .favorite-btn.active i,
    .favorite-btn.active svg,
    .favorite-btn.active {
        color: #f59e0b !important;
    }

    /* إظهار أيقونة الواتساب */
    .whatsapp-link {
        display: inline-flex !important;
        visibility: visible !important;
    }

    /* ١٣. إزالة الخلفيات مع استثناءات دقيقة */
    *:not(#authorSignature):not(#authorSignature *):not(.whatsapp-link):not(.option-label):not(#fixedTopBar):not(th):not(td):not(table):not(.inline-flex.items-center.justify-center.bg-blue-600):not(.katex):not(.katex *) {
        background-color: white !important;
        background-image: none !important;
        background: white !important;
    }

    .option-btn.border-green-500 .option-label,
    .option-btn.is-correct .option-label {
        background-color: #10b981 !important;
        color: white !important;
    }
    .option-btn.border-red-300 .option-label,
    .option-btn.is-wrong .option-label {
        background-color: #ef4444 !important;
        color: white !important;
    }
    .whatsapp-link {
        background-color: #25D366 !important;
        color: #0D47A1 !important;
    }
    #fixedTopBar {
        background-color: #f7f7f7 !important;
    }

    /* ١٤. تحسين تباين النصوص والفقرات */
    body, p, span:not(.katex *), div:not(.katex *), .text-sm, .text-base, .text-lg,
    .result-area, .explanation-area, .feedback-text {
        color: #1a1a1a !important;
    }

    /* ١٥. تقليص المسافات والهوامش العامة لضغط المحتوى المتفرق */
    body, .container, main, #questionsView {
        margin: 0 !important;
        padding: 0 !important;
    }
    .question-card, .qa-concept-card {
        margin: 4px 0 !important;
        padding: 6px 8px !important;
    }
    .question-card .mb-2, .question-card .mb-3, .question-card .mb-4,
    .question-card .mt-2, .question-card .mt-3, .question-card .mt-4,
    .qa-concept-card .mb-2, .qa-concept-card .mb-3, .qa-concept-card .mb-4 {
        margin-bottom: 4px !important;
        margin-top: 4px !important;
    }
    .question-title, .question-card h4, .qa-concept-card h4, .qa-concept-card .question-title-area {
        margin-top: 2px !important;
        margin-bottom: 6px !important;
    }

    /* ١٦. إزالة الخطوط والحدود غير الضرورية */
    .border:not(table):not(th):not(td):not(tr):not(.question-card):not(.qa-concept-card), 
    .border-t:not(table):not(th):not(td):not(tr), 
    .border-b:not(table):not(th):not(td):not(tr), 
    .border-l:not(table):not(th):not(td):not(tr), 
    .hr, hr,
    [class*="border-"]:not(table):not(td):not(th):not(tr):not(.qa-concept-card[class*="border-"]):not(.option-btn) {
        border: none !important;
    }
    .question-title::after, .question-title::before,
    h1::after, h2::after, h3::after, h4::after {
        display: none !important;
    }

    /* ١٧. رفع المحتوى إلى أعلى الصفحة وتقريب العناصر المستقرة */
    #fixedTopBar {
        position: relative !important;
        top: 0 !important;
        margin: 0 !important;
        padding: 4px 0 !important;
    }
    body {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    main, .container {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    .fixed, .sticky {
        position: relative !important;
    }
}

/* ==========================================================================
   النمط للطباعة (Print) - النسخة الشاملة والمحدثة بالكامل
   التحديثات: 
   1. معالجة خروج وقص المعادلات العربية من الأعلى والأسفل.
   2. وزن هوامش المعادلات لمنع التباعد المفرط بين الأسطر.
   3. منع العناوين اليتيمة وإجبار انتقال عناوين الوحدات والأسئلة مع محتواها.
   4. إجبار بطاقات الأسئلة والخيارات والشروحات على البقاء ككتلة واحدة مستحيلة الانقسام.
   5. تقليص وضغط الهوامش والحشو الداخلي لمنع الفراغات المهدرة تماماً.
   ========================================================================== */
@media print {
    /* ١. الإعدادات العامة وإجبار الألوان */
    body {
        background: white !important;
        font-family: "AlMohanadLocal", "Sakkal Majalla", serif !important;
        font-size: 16px !important;
        line-height: 1.3 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* إجبار طباعة الألوان والخلفيات لعناصر محددة */
    html, body, 
    .question-title, 
    .question-card .question-title,
    #questionsList .question-title, 
    .question-card h4,
    .qa-concept-card h4, 
    .qa-concept-card .question-title-area,
    .question-title-area,
    .question-card [class*="question-title"],
    .katex, .katex-display, .katex .frac-line,
    .whatsapp-link, .option-label, 
    .favorite-btn,
    .favorite-btn i,
    .favorite-btn svg,
    .option-btn.border-green-500 .option-label,
    .option-btn.border-red-300 .option-label,
    #fixedTopBar,
    .qa-concept-card .inline-flex.items-center.justify-center.bg-blue-600,
    .qa-concept-card span[class*="bg-blue-600"],
    th,
    h1, h2, h3, h4, h5 {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* إزالة الظلال من جميع العناصر غير الرياضية */
    *:not(.katex *):not(.katex-display *) {
        box-shadow: none !important;
        text-shadow: none !important;
    }

    @page {
        margin: 1cm 1.5cm 1.5cm 1.5cm !important;
        size: auto !important;
    }

    .container, .content-area, main, #questionsView {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* ٢. نظام التلوين المحدث ومنع العناوين اليتيمة */
    h1, h2, .question-card h2 {
        color: #064e3b !important; /* أخضر زمردي فخم لعناوين الماركدون الرئيسية # */
        font-weight: bold !important;
        font-family: "AlMohanadLocal", "Sakkal Majalla", serif !important;
        background-color: transparent !important;
        page-break-after: avoid !important;
        break-after: avoid !important; /* يمنع بقاء العنوان وحيداً في أسفل الصفحة */
    }

    h3, .question-card h3 {
        color: #166534 !important; /* أخضر غامق متناسق للعناوين الفرعية ## */
        font-weight: bold !important;
        page-break-after: avoid !important;
        break-after: avoid !important;
    }

    h4, .question-card h4, .qa-concept-card h4, .question-title-area h4 {
        color: #047857 !important; /* أخضر عشبي هادئ للعناوين الصغيرة ### */
        font-weight: bold !important;
        page-break-after: avoid !important;
        break-after: avoid !important;
    }

    h5, .question-card h5 {
        color: #1a1a1a !important;
        font-weight: bold !important;
        page-break-after: avoid !important;
        break-after: avoid !important;
    }

    /* الحفاظ على تلوين نصوص الأسئلة التقليدية وبطاقات الكويز باللون الأزرق النقي */
    .question-title,
    .question-card .question-title,
    #questionsList .question-title,
    .qa-concept-card .question-title-area,
    .question-title-area,
    .question-card [class*="question-title"],
    #unitTitleTop, .main-unit-header {
        color: #0D47A1 !important;
        font-weight: bold !important;
        font-family: "AlMohanadLocal", "Sakkal Majalla", serif !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        page-break-after: avoid !important;
        break-after: avoid !important; /* سحب عنوان السؤال أو الوحدة تلقائياً مع المحتوى */
    }

    /* تلوين جميع الفقرات والنصوص الداخلية التابعة لأسئلة الكويز بالأزرق */
    .question-title p,
    .question-title-area p,
    .question-card .question-title p,
    .qa-concept-card .question-title-area p,
    .question-title *,
    .question-title-area *,
    .question-card .question-title *,
    .qa-concept-card .question-title-area * {
        color: #0D47A1 !important;
        font-weight: bold !important;
    }

    /* ٣. الشريط العلوي + تاريخ الطباعة */
    #unitTitleTop {
        font-size: 24px !important;
        font-weight: bold !important;
        color: #0B3D91 !important;
        text-align: right !important;
        margin: 0 0 10px 0 !important;
        padding: 0 !important;
    }

    #fixedTopBar {
        display: block !important;
        visibility: visible !important;
        position: relative !important;
        padding: 0.5rem 0 0.8rem 0 !important;
        margin: 0 0 10px 0 !important;
        text-align: right !important;
        background-color: #f7f7f7 !important;
        border-bottom: 1px solid #ccc !important;
        font-family: "AlMohanadLocal", "Sakkal Majalla", serif !important;
        -webkit-print-color-adjust: exact !important;
    }

    #fixedTopBar::after {
        content: "إعداد/ أبو علي | تاريخ الطباعة: " attr(data-print-date) !important;
        display: block !important;
        visibility: visible !important;
        margin-top: 8px !important;
        font-weight: bold !important;
        color: #1A73E8 !important;
        font-size: 16px !important;
        background: none !important;
        text-align: center !important;
    }

    /* ٤. الملاحظة والتوقيع */
    #authorSignature {
        display: block !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        page-break-after: always !important;
        break-after: always !important;
        margin: 10px 0 0 0 !important;
        padding: 10px !important;
        border: 2px solid #0D47A1 !important;
        border-radius: 8px !important;
        background-color: #E3F2FD !important;
        font-family: "AlMohanadLocal", "Sakkal Majalla", serif !important;
    }

    #authorSignature *,
    .main-note-container,
    .author-info-container,
    .note-content-list {
        background-color: transparent !important;
        background: transparent !important;
    }

    /* زر التواصل (واتساب) */
    .whatsapp-link {
        display: inline-flex !important;
        visibility: visible !important;
        background-color: #25D366 !important;
        color: #0D47A1 !important;
        padding: 6px 12px !important;
        border-radius: 8px !important;
        text-decoration: none !important;
        font-weight: bold !important;
        margin-top: 5px !important;
    }

    /* ٥. بطاقات الأسئلة - منع الانقسام نهائياً لضمان كتلة واحدة مترابطة */
    .question-card, .qa-concept-card {
        background-color: white !important;
        border: 1px solid #ddd !important;
        border-radius: 6px !important;
        padding: 4px 6px !important; /* تقليص الحشو الداخلي لضغط الحجم */
        margin: 3px 0 !important;  /* تقليص المسافة بين الأسئلة لمنع الهدر */
        width: 100% !important;
        
        /* إجبار السؤال والجواب والخيارات على الانتقال معاً ككتلة واحدة مستحيلة الانقسام */
        page-break-inside: avoid !important;
        break-inside: avoid !important; 
    }

    /* حماية تامة لرأس السؤال والخيارات */
    .question-title, .question-title-area, .options-grid, .question-card h4, .qa-concept-card h4 {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        page-break-after: avoid !important;
        break-after: avoid !important;
    }

    /* ٦. شبكة الخيارات */
    .options-grid {
        display: grid !important;
        gap: 4px !important;
        margin: 2px 0 !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    @media (orientation: portrait) {
        .options-grid { grid-template-columns: repeat(2, 1fr) !important; }
    }
    @media (orientation: landscape) {
        .options-grid { grid-template-columns: repeat(4, 1fr) !important; }
    }

    /* نمط الخيارات العامة للطباعة */
    .option-btn {
        padding: 4px 6px !important;
        font-size: 13px !important;
        background: white !important;
        border: 1px solid #aaa !important;
        color: black !important;
        position: relative !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    .option-label {
        min-width: 20px !important;
        min-height: 20px !important;
        font-size: 12px !important;
        background-color: #ccc !important;
        color: black !important;
        border: 1px solid #888 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        visibility: visible !important;
    }

    /* تمييز الخيارات الصحيحة بعلامة ✓ */
    .option-btn.border-green-500,
    .option-btn.is-correct {
        border: 1px solid #10b981 !important;
        background-color: #f0fdf4 !important;
        position: relative !important;
    }
    .option-btn.border-green-500 .option-label,
    .option-btn.is-correct .option-label {
        background-color: #10b981 !important;
        color: white !important;
        border: none !important;
        display: inline-flex !important;
        visibility: visible !important;
    }

    .option-btn.border-green-500::after,
    .option-btn.is-correct::after {
        content: " ✓" !important;
        display: inline !important;
        visibility: visible !important;
        color: #10b981 !important;
        font-weight: bold !important;
        font-size: 16px !important;
        position: relative !important;
        top: 2px !important;
        margin-right: 4px !important;
        vertical-align: baseline !important;
    }

    /* تمييز الخيارات الخاطئة بعلامة ✗ */
    .option-btn.border-red-300,
    .option-btn.is-wrong {
        border: 1px solid #ef4444 !important;
        background-color: #fef2f2 !important;
        position: relative !important;
    }
    .option-btn.border-red-300 .option-label,
    .option-btn.is-wrong .option-label {
        background-color: #ef4444 !important;
        color: white !important;
        border: none !important;
        display: inline-flex !important;
        visibility: visible !important;
    }

    .option-btn.border-red-300::after,
    .option-btn.is-wrong::after {
        content: " ✗" !important;
        display: inline !important;
        visibility: visible !important;
        color: #ef4444 !important;
        font-weight: bold !important;
        font-size: 16px !important;
        position: relative !important;
        top: 2px !important;
        margin-right: 4px !important;
        vertical-align: baseline !important;
    }

    /* ٧. المعادلات والرموز الرياضية - الموزونة والمدمجة (حماية الحروف العربية + هوامش ضيقة) */
    .katex-display {
        color: #1565C0 !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        overflow-x: auto !important;
        overflow-y: visible !important; /* حماية تامة من قطع الحروف العلوية بدون مساحات زاوية */
        max-width: 100% !important;
        text-align: center !important;
        padding: 2px 0 !important; /* تقليص الحشو الداخلي لأقل حد ممكن */
        margin: 2px 0 !important;  /* تقليص الهامش لتقريب السطور والنصوص المحيطة */
    }

    .katex {
        color: #1565C0 !important;
        max-width: 100% !important;
        font-size: 1.05em !important;
        line-height: 1.2 !important; /* تقليص معدل الارتفاع المفرط لعدم تباعد الأسطر */
    }

    /* الحفاظ على الـ flex لسلامة اصطفاف الأرقام أفقياً */
    .katex .katex-html {
        max-width: 100% !important;
        display: inline-flex !important; 
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        row-gap: 0.2em !important; /* تضييق الفجوات الداخلية للمسألة */
        padding-top: 3px !important; /* حماية علوية خفيفة جداً ومباشرة لكلمات البسط العربي */
        padding-bottom: 1px !important;
    }

    /* ضبط العناصر الداخلية للكسور لتكون متراصة ومحمية */
    .katex .base {
        display: inline-flex !important;
        align-items: center !important;
        padding-top: 1px !important;
        padding-bottom: 1px !important;
    }

    .katex * { 
        color: #1565C0 !important; 
        text-shadow: none !important;
        border-color: #1565C0 !important;
    }

    .katex .frac-line {
        border-bottom-style: solid !important;
        border-bottom-width: 2px !important; 
        border-bottom-color: #1565C0 !important;
        background-color: #1565C0 !important; 
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .katex path {
        stroke: #1565C0 !important;
        fill: #1565C0 !important;
    }

    .katex .katex-mathml, 
    .katex .katex-html {
        font-weight: bold !important;
    }

    /* ========== الجداول (حدود كاملة ومحمية من الانقسام) ========== */
    table {
        width: 100% !important;
        border-collapse: collapse !important;
        margin: 0.5rem 0 !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        background-color: white !important;
        border: 2px solid #000 !important; 
    }
    thead {
        display: table-header-group !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    th, td {
        border: 1px solid #000 !important; 
        word-wrap: break-word !important;
        word-break: break-word !important;
    }
    th {
        background-color: #d1d5db !important;
        color: #000 !important;
        font-weight: bold !important;
        padding: 6px 8px !important;
        text-align: right !important;
    }
    td {
        background-color: white !important;
        color: #000 !important;
        padding: 4px 6px !important;
        vertical-align: top !important;
        text-align: right !important;
    }
    tr {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    /* ٨. مناطق الشرح والتفسير للإجابات المقالية والجداول */
    .qa-concept-card .answer-content, .explanation-area, .result-area, table, tr {
        /* منع انقسام الجداول أو الشروحات الداخلية لضمان مظهر احترافي */
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        margin-top: 2px !important;
        padding-top: 0 !important;
    }

    .result-area > div {
        margin-top: 0 !important;
        padding-top: 2px !important;
    }

    p, div, span:not(.katex *) {
        margin: 2px 0 !important; /* تقليص هوامش الأسطر الداخلية */
        line-height: 1.25 !important; /* سطر ملموم ومريح بالقراءة */
    }

    /* ٩. تلوين رقم السؤال المقالي */
    .qa-concept-card .inline-flex.items-center.justify-center.bg-blue-600,
    .qa-concept-card span[class*="bg-blue-600"] {
        background-color: #1e40af !important;
        color: white !important;
        border-radius: 0.5rem !important;
        padding: 0.25rem 0.75rem !important;
        font-weight: bold !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* ١٠. ألوان الإطارات الجانبية للبطاقات */
    .qa-concept-card.frame-green { border-right: 4px solid #10b981 !important; }
    .qa-concept-card.frame-red { border-right: 4px solid #ef4444 !important; }
    .qa-concept-card.frame-yellow { border-right: 4px solid #f59e0b !important; }
    .qa-concept-card.frame-purple { border-right: 4px solid #8b5cf6 !important; }

    .qa-concept-card .answer-content {
        background-color: white !important;
        color: #1f2937 !important;
        border: none !important;
    }

    /* ١١. إخفاء أزرار الصوت والتعديل */
    .play-qa-question-only,
    .play-qa-answer-only,
    .edit-qa-question-btn,
    .tts-btn,
    .play-single-question {
        display: none !important;
    }

    /* ١٢. إخفاء العناصر غير الضرورية */
    header, footer, nav,
    .controls-panel, .action-buttons, .save-button, .print-button,
    .back-button, .next-button, .score-summary, .summary-box,
    .modal-background, .modal-content, .check-btn, .check-multi-btn,
    .alert-box, .notification-box, .hidden-print,
    #toggleSolutionsBtn, #backToUnitsTop, #resetUnitTop,
    #printQuestionsBtn, #solutionsControl, #solutionsTextInProgress,
    #unitProgressTop, #quizCompletionSummary, #menuButton,
    #dropdownMenu, #themeToggle, #mainHeader, #practiceRoundSummary,
    #ttsReadPageBtn, #pauseSpeechBtn, #resumeSpeechBtn, #stopSpeechBtn,
    .tts-controls, .speed-dropdown, .speed-btn, .speed-menu,
    button[onclick*="speakSingleQuestion"], button[onclick*="startReadingFromQuestion"],
    .edit-question-btn, .edit-btn,
    .action-btn.edit-btn, .delete-btn,
    .action-btn.delete-btn, #addNewQuestionBtn, .admin-btn,
    #editNotesBtn, .edit-notes-btn, button[onclick*="showNotesManagementModal"],
    div.mt-3.p-3.bg-purple-50, div[class*="bg-purple-50"],
    textarea, input[type="text"], input[type="email"], input[type="password"],
    input[type="number"], input:not([type="checkbox"]):not([type="radio"]),
    .question-card textarea, .question-card input,
    .qa-concept-card textarea {
        display: none !important;
    }

    /* إخفاء أزرار البطاقات عدا المفضلة والواتساب */
    .question-card button:not(.option-btn):not(.favorite-btn),
    .qa-concept-card button:not(.favorite-btn) {
        display: none !important;
    }

    /* إظهار زر المفضلة وضمان وضوح النجمة */
    .favorite-btn {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        height: auto !important;
        background-color: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        margin: 0 4px !important;
        padding: 2px !important;
    }

    .favorite-btn i,
    .favorite-btn svg,
    .fa-star {
        display: inline-block !important;
        visibility: visible !important;
        font-size: 16px !important;
        color: #d1d5db !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .favorite-btn.active i,
    .favorite-btn.active svg,
    .favorite-btn.active {
        color: #f59e0b !important;
    }

    /* إظهار أيقونة الواتساب */
    .whatsapp-link {
        display: inline-flex !important;
        visibility: visible !important;
    }

    /* ١٣. إزالة الخلفيات مع استثناءات دقيقة */
    *:not(#authorSignature):not(#authorSignature *):not(.whatsapp-link):not(.option-label):not(#fixedTopBar):not(th):not(td):not(table):not(.inline-flex.items-center.justify-center.bg-blue-600):not(.katex):not(.katex *) {
        background-color: white !important;
        background-image: none !important;
        background: white !important;
    }

    .option-btn.border-green-500 .option-label,
    .option-btn.is-correct .option-label {
        background-color: #10b981 !important;
        color: white !important;
    }
    .option-btn.border-red-300 .option-label,
    .option-btn.is-wrong .option-label {
        background-color: #ef4444 !important;
        color: white !important;
    }
    .whatsapp-link {
        background-color: #25D366 !important;
        color: #0D47A1 !important;
    }
    #fixedTopBar {
        background-color: #f7f7f7 !important;
    }

    /* ١٤. تحسين تباين النصوص والفقرات */
    body, p, span:not(.katex *), div:not(.katex *), .text-sm, .text-base, .text-lg,
    .result-area, .explanation-area, .feedback-text {
        color: #1a1a1a !important;
    }

    /* ١٥. الضغط المكثف للمسافات والهوامش العامة لمنع الفراغات المهدرة */
    body, .container, main, #questionsView {
        margin: 0 !important;
        padding: 0 !important;
    }
    .question-card .mb-2, .question-card .mb-3, .question-card .mb-4,
    .question-card .mt-2, .question-card .mt-3, .question-card .mt-4,
    .qa-concept-card .mb-2, .qa-concept-card .mb-3, .qa-concept-card .mb-4 {
        margin-bottom: 2px !important;
        margin-top: 2px !important;
    }
    .question-title, .question-card h4, .qa-concept-card h4, .qa-concept-card .question-title-area {
        margin-top: 1px !important;
        margin-bottom: 3px !important;
    }

    /* ١٦. إزالة الخطوط والحدود غير الضرورية */
    .border:not(table):not(th):not(td):not(tr):not(.question-card):not(.qa-concept-card), 
    .border-t:not(table):not(th):not(td):not(tr), 
    .border-b:not(table):not(th):not(td):not(tr), 
    .border-l:not(table):not(th):not(td):not(tr), 
    .hr, hr,
    [class*="border-"]:not(table):not(td):not(th):not(tr):not(.qa-concept-card[class*="border-"]):not(.option-btn) {
        border: none !important;
    }
    .question-title::after, .question-title::before,
    h1::after, h2::after, h3::after, h4::after {
        display: none !important;
    }

    /* ١٧. رفع المحتوى إلى أعلى الصفحة وتقريب العناصر المستقرة */
    #fixedTopBar {
        position: relative !important;
        top: 0 !important;
        margin: 0 !important;
        padding: 4px 0 !important;
    }
    body {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    main, .container {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    .fixed, .sticky {
        position: relative !important;
    }
}