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);
        }

        /* الوضع المستقلّ (التطبيق المثبَّت)
           ------------------------------------------------------------
           كانت هذه القاعدة تكتب padding-top مفرداً، فتُلغي المئة بكسل
           المكتوبة أعلاه لشاشات الجوّال — والمتصفّح يُرجع صفراً لهامش
           الشاشة الآمن ما لم يُطلب viewport-fit=cover. فتصير المسافة
           صفراً وتغطّي الترويسة الثابتة أعلى الصفحة، وأوّل ما يُغطّى
           شريط الموقع.

           والعلاج أن تُضاف لا أن تحلّ محلّها. */
        @media (display-mode: standalone) {
            body { padding-bottom: env(safe-area-inset-bottom, 0px); }
        }
        @media (display-mode: standalone) and (max-width: 768px) {
            body { padding-top: calc(100px + env(safe-area-inset-top, 0px)); }
        }
        @media (display-mode: standalone) and (min-width: 769px) {
            body { padding-top: env(safe-area-inset-top, 0px); }
        }
        
        @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}

        /* ══════════════════════════════════════════════════════
           زرّ الإذاعة في التذييل
           ──────────────────────────────────────────────────────
           التموّج موجات صوتية تتحرّك لا زخرفة: تدلّ على أن خلفه بثّاً
           حيّاً لا صفحةً ساكنة، فيُقرأ معناه قبل أن يُقرأ نصّه.
           وتتوقّف الحركة لمن طلب تقليل الحركة في نظامه.
           ══════════════════════════════════════════════════════ */
        .radio-cta {
            display: inline-flex; align-items: center; gap: 14px;
            padding: 14px 30px; margin-bottom: 24px;
            border-radius: 999px; text-decoration: none;
            background: linear-gradient(135deg, #81B29A 0%, #6B9B7F 100%);
            color: #FFFFFF; font-weight: 700; font-size: 1.05rem;
            box-shadow: 0 6px 18px rgba(61, 64, 91, .22), 0 2px 6px rgba(61, 64, 91, .14);
            transition: transform .25s ease, box-shadow .25s ease;
        }
        .radio-cta:hover, .radio-cta:focus-visible {
            transform: translateY(-3px); color: #FFFFFF;
            box-shadow: 0 14px 30px rgba(61, 64, 91, .30), 0 4px 10px rgba(61, 64, 91, .18);
        }
        .radio-cta:focus-visible { outline: 3px solid #F2CC8F; outline-offset: 3px; }

        .radio-txt { display: flex; flex-direction: column; line-height: 1.45; }
        .radio-sub { font-size: .78rem; font-weight: 400; opacity: .92; }

        .radio-wave {
            display: inline-flex; align-items: flex-end;
            gap: 3px; height: 24px; flex: none;
        }
        .radio-wave span {
            width: 4px; border-radius: 2px; background: #F2CC8F;
            transform-origin: bottom;
            animation: radioWave 1.15s ease-in-out infinite;
        }
        .radio-wave span:nth-child(1) { height: 45%; animation-delay: 0s; }
        .radio-wave span:nth-child(2) { height: 78%; animation-delay: .14s; }
        .radio-wave span:nth-child(3) { height: 100%; animation-delay: .28s; }
        .radio-wave span:nth-child(4) { height: 68%; animation-delay: .42s; }
        .radio-wave span:nth-child(5) { height: 50%; animation-delay: .56s; }
        @keyframes radioWave {
            0%, 100% { transform: scaleY(.4); }
            50%      { transform: scaleY(1); }
        }

        @media (prefers-reduced-motion: reduce) {
            .radio-wave span { animation: none; }
            .radio-cta { transition: none; }
            .radio-cta:hover { transform: none; }
        }
        @media (max-width: 480px) {
            .radio-cta {
                width: 100%; justify-content: center;
                padding: 13px 20px; font-size: .98rem;
            }
        }

        /* ── الإذاعة في القائمة المنسدلة ─────────────────────────
           بثّ حيّ بين روابط ساكنة، فتُميَّز بلون الموقع الأعمق وبنقطة
           نابضة في طرف السطر — والنبض هو الفرق بين «رابط إذاعة»
           و«إذاعة تعمل الآن». وتسكن لمن طلب تقليل الحركة. */
        .dropdown-menu a.dd-radio { color: #6B9B7F; font-weight: 700; }
        .dropdown-menu a.dd-radio:hover { color: #4D7C60; }
        .dd-live {
            width: 9px; height: 9px; border-radius: 50%; flex: none;
            background: #E05A4A; margin-inline-start: auto;
            box-shadow: 0 0 0 0 rgba(224, 90, 74, .65);
            animation: ddLive 1.7s ease-out infinite;
        }
        @keyframes ddLive { to { box-shadow: 0 0 0 9px rgba(224, 90, 74, 0); } }
        @media (prefers-reduced-motion: reduce) { .dd-live { animation: none; } }

        /* ── فرع «مشاريعنا» في القائمة المنسدلة ─────────────────
           ينسدل داخل القائمة ولا ينبثق جانباً: المنبثقة تحتاج مرور
           المؤشّر ولا مؤشّر على الجوّال، فتلتبس اللمسة بين فتح الفرع
           واتّباع الرابط. والانسدال لمسة واضحة على الجهازين، ويعمل
           بلوحة المفاتيح، ولا يخرج عن حافّة الشاشة الضيّقة. */
        .dropdown-menu .dd-group {
            display: flex; align-items: center; width: 100%;
            padding: 15px 20px; background: #FFFFFF; border: 0;
            border-bottom: 1px solid #f3f4f6;
            color: #374151; font-family: inherit; font-size: inherit;
            text-align: start; cursor: pointer; transition: all .3s ease;
        }
        .dropdown-menu .dd-group:hover {
            background: linear-gradient(135deg, #f0fdf4, #dcfce7); color: #16a34a;
        }
        .dropdown-menu .dd-group[aria-expanded="true"] { color: #16a34a; font-weight: 700; }
        .dd-caret {
            margin-inline-start: auto; font-size: .75rem; color: #9AA3AF;
            transition: transform .25s ease;
        }
        .dropdown-menu .dd-group[aria-expanded="true"] .dd-caret { transform: rotate(180deg); }

        .dd-sub { display: none; background: #FAFBFA; }
        .dd-sub.open { display: block; }
        .dropdown-menu .dd-sub a {
            padding-inline-start: 46px; font-size: .9rem; position: relative;
        }
        .dropdown-menu .dd-sub a::before {
            content: ""; position: absolute; inset-inline-start: 27px; top: 50%;
            width: 6px; height: 6px; border-radius: 50%;
            background: #81B29A; transform: translateY(-50%);
        }
        @media (prefers-reduced-motion: reduce) { .dd-caret { transition: none; } }