body {
            font-family: 'Cairo', sans-serif;
            background-color: #FFFEFE;
            color: #3D405B;
            text-align: justify;
            padding-top: 120px;
            -webkit-touch-callout: none;
            -webkit-tap-highlight-color: transparent;
            overscroll-behavior: contain;
        }
        
        .highlight { background-color: yellow; }

        /* تظليل كلمات البحث في نتائج البحث */
        mark.search-hit {
            background-color: #ffe733;
            color: #111827;
            border-radius: 3px;
            padding: 0 1px;
        }

        /* Fixed Header Styles */
        .fixed-header {
            position: fixed;
            top: 0; left: 0; right: 0;
            z-index: 1000;
            background: linear-gradient(135deg, #81B29A 0%, #6B9B7F 100%);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(10px);
            transition: all 0.3s ease;
        }

        .header-banner {
            background: linear-gradient(45deg, #F2CC8F, #E6B800);
            color: #3D405B;
            text-align: center;
            padding: 8px 0;
            font-size: 14px;
            font-weight: 600;
            position: relative;
            overflow: hidden;
        }

        .header-banner::before {
            content: '';
            position: absolute;
            top: 0; left: -100%;
            width: 100%; height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
            animation: shimmer 3s infinite;
        }

        @keyframes shimmer {
            0% { left: -100%; }
            100% { left: 100%; }
        }

        .header-content {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 15px 20px;
            max-width: 1200px;
            margin: 0 auto;
        }

        .logo-section { display: flex; align-items: center; gap: 15px; }

        .logo-icon {
            width: 50px; height: 50px;
            background: linear-gradient(135deg, #F2CC8F, #E6B800);
            border-radius: 12px;
            display: flex; align-items: center; justify-content: center;
            font-size: 24px; color: #3D405B;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }

        .logo-text { color: white; font-size: 20px; font-weight: 700; }
        .nav-buttons { display: flex; align-items: center; gap: 15px; }

        .nav-circle-btn {
            color: white; width: 50px; height: 50px;
            border-radius: 50%; border: none; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            text-decoration: none; font-weight: 600;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        }

        .nav-circle-btn:hover {
            transform: translateY(-2px) scale(1.05);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
        }

        .courses-btn-circle { background: linear-gradient(135deg, #22c55e, #16a34a); font-size: 13px; }
        .new-btn-circle { background: linear-gradient(135deg, #4ade80, #22c55e); font-size: 13px; }

        .dropdown { position: relative; }
        .dropdown-btn {
            background: linear-gradient(135deg, #16a34a, #15803d);
            color: white; width: 50px; height: 50px;
            border-radius: 50%; border: none; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            font-size: 18px; transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(22, 163, 74, 0.3);
        }
        .dropdown-btn:hover { transform: rotate(90deg) scale(1.1); }

        .dropdown-menu {
            position: absolute; left: 0; top: 60px; width: 250px;
            background: white; border-radius: 15px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
            border: 1px solid #e5e7eb;
            opacity: 0; visibility: hidden;
            transform: translateY(-10px); transition: all 0.3s ease;
        }
        .dropdown-menu.show { opacity: 1; visibility: visible; transform: translateY(0); }
        .dropdown-menu a {
            display: flex; align-items: center; padding: 15px 20px;
            color: #374151; text-decoration: none; transition: all 0.3s ease;
            border-bottom: 1px solid #f3f4f6;
        }
        .dropdown-menu a:last-child { border-bottom: none; border-radius: 0 0 15px 15px; }
        .dropdown-menu a:first-child { border-radius: 15px 15px 0 0; }
        .dropdown-menu a:hover { background: linear-gradient(135deg, #f0fdf4, #dcfce7); color: #16a34a; transform: translateX(-5px); }
        .dropdown-menu i { margin-inline-end: 12px; font-size: 16px; }

        @media (max-width: 768px) {
            body { padding-top: 100px; }
            .header-content { padding: 10px 15px; }
            .logo-text { font-size: 16px; }
            .nav-circle-btn, .dropdown-btn { width: 44px; height: 44px; }
            .courses-btn-circle, .new-btn-circle { font-size: 11px; }
            .dropdown-menu { width: 200px; }
        }

        .container { max-width: 960px; }
        .social-icon { transition: transform 0.3s ease-in-out; }
        .social-icon:hover { transform: translateY(-5px); }
        
        #scrollToTopBtn, #refreshBtn {
            position: fixed; left: 20px; z-index: 99;
            border-radius: 50%; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            transition: all 0.3s; cursor: pointer; outline: none;
        }
        #scrollToTopBtn { bottom: 20px; border: 2px solid #333; background: transparent; color: #333; padding: 15px; font-size: 24px; display: none; }
        #refreshBtn { bottom: 80px; border: 2px solid #81B29A; background: #81B29A; color: white; padding: 15px; font-size: 20px; }
        #refreshBtn:hover { background-color: #6B9B7F; transform: translateY(-3px); }

        /* زر تثبيت التطبيق العائم (PWA) */
        #installAppBtn {
            position: fixed; bottom: 140px; left: 20px; z-index: 100;
            width: 58px; height: 58px; border-radius: 50%; border: 2px solid #FFFFFF;
            background: linear-gradient(135deg, #81B29A 0%, #6B9B7F 100%);
            color: #FFFFFF; font-size: 24px; cursor: pointer; outline: none;
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
            transition: all 0.3s ease;
            display: flex; align-items: center; justify-content: center;
            text-decoration: none;
        }
        #installAppBtn:hover {
            transform: translateY(-3px) scale(1.05);
            box-shadow: 0 10px 22px rgba(0, 0, 0, 0.3);
            background: linear-gradient(135deg, #6B9B7F 0%, #5A8A6E 100%);
        }
        #installHint {
            position: fixed; bottom: 210px; left: 20px; max-width: 280px; z-index: 101;
            background: #FFFFFF; color: #3D405B; border: 1px solid #E2E8F0; border-radius: 12px;
            padding: 12px 14px; font-size: 0.9rem; line-height: 1.8; text-align: start;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
        }

        @media (display-mode: standalone) {
            body { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
        }
        
        @media (max-width: 768px) {
            .container { padding-inline-end: 1rem; padding-inline-start: 1rem; }
            .tab-btn { font-size: 0.875rem; padding: 0.5rem 0.75rem; margin: 0.25rem; }
            .card { margin-bottom: 1rem; padding: 1rem; }
            header img { max-width: 90%; height: auto; }
        }
        
        .tab-btn, button, a { min-height: 44px; min-width: 44px; touch-action: manipulation; }
        
        .tab-active { border-color: #81B29A; background-color: #81B29A; color: #FFFFFF; transform: scale(1.05); transition: all 0.3s ease; }
        .tab-inactive { border-color: #D1D5DB; background-color: #FFFFFF; color: #3D405B; transition: all 0.3s ease; }
        .tab-inactive:hover { background-color: #F3F4F6; transform: translateY(-2px); }
        
        .card { background-color: #FFFFFF; border-inline-start: 4px solid #F2CC8F; transition: transform 0.3s, box-shadow 0.3s; border-radius: 12px; overflow: hidden; }
        .card:hover { transform: translateY(-5px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.07), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
        
        html { scroll-behavior: smooth; }
        
        .chart-container { position: relative; height: 200px; width: 100%; max-width: 500px; margin: auto; }
        @media (min-width: 768px) { .chart-container { height: 350px; } }
        
        .flow-step { border: 2px solid #81B29A; background-color: #ffffff; border-radius: 8px; transition: all 0.3s ease; }
        .flow-step:hover { background-color: #f0fdf4; transform: scale(1.02); }
        .flow-arrow { color: #81B29A; }
        
        .popup { position: relative; display: inline-block; cursor: pointer; user-select: none; }
        .popup .popuptext {
            visibility: hidden; width: 160px; background-color: #555; color: #fff; text-align: center;
            border-radius: 6px; padding: 8px 0; position: absolute; z-index: 1; bottom: 125%; left: 50%; margin-inline-end: -80px;
        }
        .popup .popuptext::after {
            content: ""; position: absolute; top: 100%; left: 50%; margin-inline-end: -5px;
            border-width: 5px; border-style: solid; border-color: #555 transparent transparent transparent;
        }
        .popup .show { visibility: visible; animation: fadeIn 1s; }
        @keyframes fadeIn { from {opacity: 0;} to {opacity:1 ;} }
        img { display: block; margin-inline-end: auto; margin-inline-start: auto; }
        
        details > summary { list-style: none; }
        details > summary::-webkit-details-marker { display: none; }
        details[open] > summary .expansion-indicator { transform: rotate(180deg); }

        /* فئات جديدة للتحكم في عرض التبويبات بدون جافا سكربت معقد */
        .tab-section { display: none; }
        .tab-section.active { display: block; animation: fadeIn 0.5s; }
    
.skip-link{position:absolute;right:-9999px;top:0;z-index:9999;background:#2c3a34;color:#fff;
padding:10px 18px;border-radius:0 0 8px 0;text-decoration:none;font-weight:700}
.skip-link:focus{right:0}