:root {
            --bg-gradient-light: linear-gradient(135deg, #e0eafc 0%, #cfdef3 100%);
            --bg-gradient-dark: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
            
            --card-bg-light: rgba(255, 255, 255, 0.75);
            --card-bg-dark: rgba(30, 41, 59, 0.7);
            
            --border-light: rgba(0, 114, 255, 0.15);
            --border-dark: rgba(255, 255, 255, 0.08);
            
            --text-light: #1e293b;
            --text-dark: #f8fafc;
            
            --primary-color: #059669;
            --primary-gradient: linear-gradient(135deg, #2dd4bf 0%, #059669 100%);
            --btn-hover-shadow: rgba(5, 150, 105, 0.25);
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Tajawal', sans-serif;
            transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease;
        }

        html {
            min-height: 100%;
            width: 100%;
            background: var(--bg-gradient-light);
            background-color: #cfdef3; /* لون احتياطي صلب: يمنع ظهور مربع أبيض خلف التدرّج أثناء ارتداد التمرير السريع (overscroll bounce) */
            overscroll-behavior-y: none; /* يعطّل تأثير "الارتداد" عند سحب الصفحة بسرعة، وهو السبب الفعلي لظهور المربع الأبيض بالأسفل */
        }

        body {
            min-height: 100vh;
            min-height: 100dvh;
            min-height: calc(var(--real-vh, 1vh) * 100); /* ارتفاع حقيقي محسوب بجافاسكريبت، يتغلب على مشاكل حساب الشاشة داخل تطبيقات الويب فيو */
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 98px 20px 40px 20px; 
            overflow-x: hidden;
            overscroll-behavior-y: none; /* نفس المنطق على body لضمان تعطيل الارتداد بكل المتصفحات */
            position: relative;
        }

        body.light { background: var(--bg-gradient-light); background-color: #cfdef3; color: var(--text-light); }
        body.dark { background: var(--bg-gradient-dark); background-color: #0f172a; color: var(--text-dark); }

        /* --- شريط الأخبار: يتحرك مع الصفحة --- */
        /* --- بانر تثبيت التطبيق (PWA) --- */
        .pwa-install-banner {
            position: fixed;
            left: 50%;
            bottom: -200px;
            transform: translateX(-50%);
            width: 92%;
            max-width: 420px;
            z-index: 999999;
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 14px 16px;
            border-radius: 18px;
            box-shadow: 0 15px 35px rgba(0,0,0,0.25);
            backdrop-filter: blur(12px);
            transition: bottom 0.5s cubic-bezier(.2,.8,.2,1);
        }
        .pwa-install-banner.show { bottom: max(20px, calc(env(safe-area-inset-bottom, 0px) + 16px)); }
        /* عند ظهور بانر التثبيت نترك مجالاً إضافياً بأسفل الصفحة حتى لا يُغطّى اسم المطوّر */
        body.pwa-banner-visible { padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }
        body.light .pwa-install-banner { background: rgba(255,255,255,0.95); border: 1px solid var(--border-light); }
        body.dark .pwa-install-banner { background: rgba(30,41,59,0.95); border: 1px solid var(--border-dark); }
        .pwa-install-banner .pwa-icon {
            width: 46px; height: 46px; border-radius: 12px; object-fit: cover; flex-shrink: 0;
        }
        .pwa-install-banner .pwa-text { flex: 1; min-width: 0; }
        .pwa-install-banner .pwa-text strong { display: block; font-size: 14.5px; }
        body.light .pwa-install-banner .pwa-text strong { color: var(--text-light); }
        body.dark .pwa-install-banner .pwa-text strong { color: var(--text-dark); }
        .pwa-install-banner .pwa-text span { font-size: 12.5px; opacity: 0.75; display: block; margin-top: 2px; }
        .pwa-install-banner .pwa-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
        .pwa-install-banner .pwa-btn-install {
            background: var(--primary-gradient);
            color: #fff; border: none; padding: 9px 16px; border-radius: 30px;
            font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap;
            box-shadow: 0 6px 14px var(--btn-hover-shadow);
        }
        .pwa-install-banner .pwa-btn-close {
            background: transparent; border: none; font-size: 18px; cursor: pointer; opacity: 0.55; padding: 4px 6px;
        }
        body.light .pwa-install-banner .pwa-btn-close { color: var(--text-light); }
        body.dark .pwa-install-banner .pwa-btn-close { color: var(--text-dark); }

        /* تعليمات التثبيت اليدوي على آيفون (سفاري) */
        .pwa-ios-steps { display: flex; align-items: center; gap: 6px; font-size: 12px; opacity: 0.85; margin-top: 4px; }

        .ticker-wrap {
            position: absolute; 
            top: 40px; left: 5%; right: 5%;
            width: 90%; max-width: 800px; margin: 0 auto;
            height: 44px; overflow: hidden;
            display: flex; align-items: center;
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
            z-index: 9999; border-radius: 50px; backdrop-filter: blur(10px);
            flex-direction: row;
        }
        body.light .ticker-wrap { background: var(--card-bg-light); border: 1px solid var(--border-light); }
        body.dark .ticker-wrap { background: var(--card-bg-dark); border: 1px solid var(--border-dark); }

        .ticker-title {
            background: var(--primary-gradient);
            color: #fff; padding: 0 20px; height: 100%;
            display: flex; align-items: center; font-weight: 700; 
            font-size: 0.85rem; z-index: 10; white-space: nowrap; 
            border-radius: 0 50px 50px 0;
            box-shadow: -3px 0 10px rgba(5,150,105,0.2);
        }
        .ticker-title i { margin-left: 6px; animation: blink 1s infinite; font-size: 0.9rem; }
        
        .ticker-container-inner { width: 100%; overflow: hidden; direction: rtl; }
        .ticker-content { display: inline-block; white-space: nowrap; padding-right: 100%; animation: tickerAnimation 25s linear infinite; font-weight: 500; font-size: 0.9rem; }
        .ticker-wrap:hover .ticker-content { animation-play-state: paused; }

        @keyframes tickerAnimation { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(100%, 0, 0); } }
        @keyframes blink { 50% { opacity: 0; } }

        /* الحاوية الرئيسية */
        .container {
            width: 100%; max-width: 500px; padding: 40px 30px; border-radius: 24px; backdrop-filter: blur(10px); box-shadow: 0 20px 40px rgba(0,0,0,0.12); text-align: center; position: relative; animation: fadeInPage 0.8s ease-out forwards; opacity: 0; transform: translateY(20px); margin-bottom: 20px; margin-top: 0;
        }
        body.light .container { background: var(--card-bg-light); border: 2px dashed #2dd4bf; }
        body.dark .container { background: var(--card-bg-dark); border: 2px dashed #2dd4bf; }
        @keyframes fadeInPage { to { opacity: 1; transform: translateY(0); } }

        /* --- الحاوية الذكية لبناء الإطار المتقطع الدوار حول اللوغو القلّاب --- */
        .logo-wrapper {
            margin-bottom: 20px;
            display: inline-block;
            position: relative;
            width: 160px;
            height: 160px;
        }
        
        /* الإطار المتقطع بلون أصفر وتوهج نبضي متوسط وعصري */
        .rotating-dashed-border {
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            border-radius: 50%;
            border: 3px dashed #ffd700; /* إطار متقطع بلون أصفر ذهبي */
            box-sizing: border-box;
            
            /* تفعيل حركتي الدوران المستمر والنبض الخفيف للتوهج الأصفر */
            animation: 
                spinBorder 12s linear infinite,
                mediumYellowGlow 2s ease-in-out infinite alternate;
        }
        
        /* اللوغو بداخل الإطار وحركة القلب ثلاثية الأبعاد الموقوتة */
        .flipping-logo {
            position: absolute;
            top: 10px; left: 10px; /* موازنة اللوغو بالمنتصف تماماً داخل الإطار الدوار */
            width: 140px; height: 140px;
            object-fit: contain;
            border-radius: 50%;
            background: transparent;
            border: none !important;
            box-shadow: none !important;
            perspective: 1000px;
            animation: flipLogo 5s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
        }
        
        /* حركة فتل اللوغو (مرة كل 5 ثواني وسريعة ضرب 2) */
        @keyframes flipLogo {
            0% { transform: rotateY(0deg); }
            20% { transform: rotateY(360deg); } 
            100% { transform: rotateY(360deg); } 
        }

        /* حركة دوران الإطار المتقطع حول نفسه */
        @keyframes spinBorder {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* أنيميشن التوهج الأصفر المعتدل والمتوسط */
        @keyframes mediumYellowGlow {
            0% {
                box-shadow: 0 0 8px rgba(255, 215, 0, 0.4), inset 0 0 4px rgba(255, 215, 0, 0.2);
            }
            100% {
                box-shadow: 0 0 16px rgba(255, 235, 59, 0.6), inset 0 0 8px rgba(255, 235, 59, 0.3);
            }
        }

        /* --- تأثير حركة الألوان للعنوان الرئيسي --- */
        h1.animated-title { 
            font-size: 2.2rem; 
            margin-bottom: 12px; 
            font-weight: 700; 
            background: linear-gradient(to right, #2dd4bf, #059669, #f59e0b, #2dd4bf); 
            background-size: 300% auto; 
            -webkit-background-clip: text; 
            -webkit-text-fill-color: transparent; 
            animation: textShine 5s linear infinite, textPulse 3s ease-in-out infinite alternate;
            text-shadow: 0 4px 12px rgba(5, 150, 105, 0.05);
        }

        @keyframes textShine { 0% { background-position: 0% center; } 100% { background-position: 300% center; } }
        @keyframes textPulse { 0% { transform: scale(1); letter-spacing: 0px; } 100% { transform: scale(1.02); letter-spacing: 0.5px; } }

        /* --- استثناء الإيموجي (مثل 👋) من تأثير التدرّج اللوني (background-clip:text)؛
           بدون هذا الاستثناء تُعامَل الإيموجي كنص عادي فيُقصّ جزء منها بصرياً أثناء تكبير العنوان (textPulse) --- */
        h1.animated-title .emoji-fix {
            -webkit-background-clip: initial;
            background-clip: initial;
            -webkit-text-fill-color: initial;
            color: initial;
            display: inline-block;
        }

        .subtitle { font-size: 0.95rem; opacity: 0.75; margin-bottom: 30px; }

        /* --- الصندوق الجميل لعنوان "خدمات كفرتخاريم" --- */
        .services-title-box {
            display: flex; align-items: center; justify-content: center; gap: 10px;
            padding: 11px 16px; margin: 0 0 16px 0; border-radius: 16px;
            position: relative; overflow: hidden;
            background: linear-gradient(135deg, rgba(45,212,191,0.14) 0%, rgba(5,150,105,0.14) 50%, rgba(245,158,11,0.14) 100%);
            box-shadow: 0 10px 26px rgba(5,150,105,0.12);
            animation: fadeInPage 0.9s ease-out forwards;
        }
        body.light .services-title-box { border: 1.5px solid rgba(5,150,105,0.25); }
        body.dark .services-title-box { border: 1.5px solid rgba(255,255,255,0.15); }
        .services-title-box::before {
            content: ''; position: absolute; top: 0; left: -150%; width: 60%; height: 100%;
            background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.35) 50%, rgba(255,255,255,0) 100%);
            transform: skewX(-25deg); animation: shineFlare 6s infinite ease-in-out;
        }
        .services-title-icon {
            width: 36px; height: 36px; min-width: 36px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center; font-size: 1rem;
            background: linear-gradient(135deg, #2dd4bf, #059669); color: #fff;
            box-shadow: 0 4px 14px rgba(5,150,105,0.35);
        }
        .services-title-text { display: flex; flex-direction: column; align-items: flex-start; text-align: right; min-width: 0; }
        /* عنوان "خدمات كفرتخاريم": حجم أصغر يتقلّص مع الشاشة ويبقى دائماً بسطر واحد */
        .services-title-text h1.animated-title {
            font-size: clamp(0.85rem, 4.2vw, 1.25rem); margin: 0; white-space: nowrap;
        }
        .services-title-text .subtitle {
            margin: 2px 0 0; font-size: clamp(0.62rem, 2.6vw, 0.8rem);
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
        }

        /* --- صندوق الحكمة اليومية (أسفل عنوان الخدمات مباشرةً) --- */
        .wisdom-box {
            position: relative; width: 100%; box-sizing: border-box;
            padding: 13px 16px 14px; margin: 0 0 16px; border-radius: 16px;
            text-align: center; overflow: hidden; isolation: isolate;
            background: linear-gradient(135deg, rgba(139,92,246,0.20) 0%, rgba(124,58,237,0.15) 50%, rgba(91,33,182,0.18) 100%);
            box-shadow: 0 10px 26px rgba(124,58,237,0.18);
            animation: fadeInPage 0.9s ease-out forwards;
        }
        body.light .wisdom-box { border: 1.5px solid rgba(124,58,237,0.28); }
        body.dark  .wisdom-box { border: 1.5px solid rgba(167,139,250,0.24); }
        .wisdom-box::after {
            content: ''; position: absolute; top: 0; left: -150%; width: 55%; height: 100%; z-index: -1;
            background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(237,233,254,0.42) 50%, rgba(255,255,255,0) 100%);
            transform: skewX(-25deg); animation: shineFlare 7s infinite ease-in-out;
        }
        .wisdom-head {
            display: inline-flex; align-items: center; gap: 6px; margin-bottom: 6px;
            font-size: clamp(0.66rem, 2.7vw, 0.82rem); font-weight: 800;
            color: #6d28d9; opacity: 0.95;
        }
        body.dark .wisdom-head { color: #c4b5fd; }
        .wisdom-head i { font-size: 0.9em; }
        .wisdom-text {
            margin: 0; font-weight: 700; line-height: 1.7;
            font-size: clamp(0.85rem, 3.4vw, 1.05rem);
            word-break: break-word;
        }
        body.light .wisdom-text { color: #4c1d95; }
        body.dark  .wisdom-text { color: #ede9fe; }
        .wisdom-close {
            position: absolute; top: 7px; left: 9px; width: 24px; height: 24px;
            display: flex; align-items: center; justify-content: center;
            border: none; border-radius: 50%; cursor: pointer; padding: 0;
            font-size: 1.1rem; line-height: 1; font-weight: 700;
            background: rgba(76,29,149,0.12); color: inherit; opacity: 0.65;
            transition: opacity 0.2s ease, background 0.2s ease, transform 0.2s ease;
        }
        body.dark .wisdom-close { background: rgba(167,139,250,0.16); }
        .wisdom-close:hover { opacity: 1; transform: scale(1.08); background: rgba(109,40,217,0.9); color: #fff; }
        
        /* --- شارة الترحيب بالزائر في الصفحة الرئيسية (تصميم جديد) --- */
        .welcome-badge {
            display: flex; align-items: center; justify-content: space-between; gap: 8px;
            position: relative; overflow: hidden; width: 100%; box-sizing: border-box;
            padding: 11px 15px 11px 14px; margin: -10px 0 22px;
            border-radius: 20px; font-weight: 800; font-size: clamp(0.78rem, 3.2vw, 0.98rem);
            color: #fff; line-height: 1.4; isolation: isolate;
            background:
                radial-gradient(circle at 15% 20%, rgba(255,255,255,0.4), transparent 32%),
                radial-gradient(circle at 88% 82%, rgba(255,255,255,0.18), transparent 40%),
                linear-gradient(120deg, #4f46e5 0%, #9333ea 38%, #ec4899 68%, #f59e0b 100%);
            background-size: 100% 100%, 100% 100%, 220% 220%;
            box-shadow: 0 14px 34px rgba(147,51,234,0.32), 0 4px 14px rgba(236,72,153,0.22), inset 0 1px 0 rgba(255,255,255,0.34);
            animation: fadeInPage 0.8s ease-out, welcomeGradientShift 9s ease-in-out infinite, welcomeGlow 3.2s ease-in-out infinite;
        }
        .welcome-badge-content {
            display: flex; align-items: center; gap: 8px;
            flex: 1 1 auto; min-width: 0; overflow: hidden;
        }
        .welcome-badge::before {
            content: ''; position: absolute; inset: 1.5px; border-radius: 19px;
            border: 1px solid rgba(255,255,255,0.38); pointer-events: none; z-index: -1;
        }
        .welcome-badge-content i {
            width: 34px; height: 34px; min-width: 34px; border-radius: 50%;
            display: inline-flex; align-items: center; justify-content: center;
            color: #9333ea; background: rgba(255,255,255,0.95);
            box-shadow: 0 5px 16px rgba(0,0,0,0.18), 0 0 0 3px rgba(255,255,255,0.18);
            overflow: hidden; flex-shrink: 0;
        }
        /* الأنيميشن يُطبَّق على رمز الأيقونة نفسه (::before) وليس على الدائرة المحيطة به،
           بهذا تبقى الدائرة ثابتة ومستديرة تماماً ولا تنكسر شكلها لمربع أثناء التكبير */
        .welcome-badge-content i::before { display: inline-block; animation: heartbeat 1.6s infinite; }
        .welcome-badge-text {
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
            flex: 1 1 auto; min-width: 54px;
        }
        .welcome-badge-name {
            display: inline-flex; align-items: center; max-width: min(48vw, 230px);
            padding: 3px 11px; margin-right: 3px; border-radius: 999px;
            background: rgba(255,255,255,0.24); color: #fff;
            border: 1px solid rgba(255,255,255,0.34);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
            vertical-align: middle; position: relative; top: -1px;
            text-decoration: underline; text-decoration-color: rgba(255,255,255,0.75);
            text-underline-offset: 3px; cursor: pointer;
            transition: background 0.2s ease, transform 0.15s ease;
        }
        .welcome-badge-name:hover, .welcome-badge-name:active {
            background: rgba(255,255,255,0.36); color: #fff;
        }
        body.light .welcome-badge { box-shadow: 0 14px 32px rgba(147,51,234,0.26), 0 4px 12px rgba(236,72,153,0.18); }
        body.dark .welcome-badge { box-shadow: 0 16px 36px rgba(147,51,234,0.36), inset 0 1px 0 rgba(255,255,255,0.22); }
        /* الجرس داخل شريط الترحيب أصغر شوي عشان يفسح مساحة أكبر لاسم الزائر */
        .welcome-badge .ktx-bell-btn { width: 33px; height: 33px; font-size: 0.9rem; }
        .welcome-badge .ktx-bell-badge { min-width: 16px; height: 16px; font-size: 0.6rem; top: -3px; left: -3px; }
        @keyframes welcomeGradientShift {
            0%, 100% { background-position: 0% 50%, 0% 50%, 0% 50%; }
            50% { background-position: 0% 50%, 0% 50%, 100% 50%; }
        }
        @keyframes welcomeGlow {
            0%, 100% { box-shadow: 0 14px 34px rgba(147,51,234,0.32), 0 4px 14px rgba(236,72,153,0.22), inset 0 1px 0 rgba(255,255,255,0.34); }
            50% { box-shadow: 0 16px 40px rgba(236,72,153,0.4), 0 4px 18px rgba(245,158,11,0.28), inset 0 1px 0 rgba(255,255,255,0.4); }
        }
        @media (max-width: 380px) {
            .welcome-badge { gap: 6px; padding: 9px 11px 9px 12px; border-radius: 16px; }
            .welcome-badge-content { gap: 6px; }
            .welcome-badge-content i { width: 27px; height: 27px; min-width: 27px; font-size: 0.8rem; }
            .welcome-badge-text { min-width: 44px; }
            .welcome-badge-name { max-width: 38vw; padding: 2px 7px; }
        }
        @media (max-width: 340px) {
            .welcome-badge { padding: 8px 9px 8px 10px; }
            .welcome-badge-content i { width: 24px; height: 24px; min-width: 24px; font-size: 0.74rem; }
            .welcome-badge-text { min-width: 36px; }
            .welcome-badge-name { max-width: 34vw; padding: 2px 6px; }
        }

        /* --- عناصر صفحة الترحيب (الاسم والعمر) --- */
        .welcome-input {
            width: 100%; padding: 16px 20px; font-size: 1.1rem;
            border-radius: 14px; text-align: center; outline: none;
            margin-bottom: 20px; font-family: 'Tajawal', sans-serif; font-weight: 500;
        }
        body.light .welcome-input { background: rgba(255,255,255,0.7); border: 1px solid var(--border-light); color: var(--text-light); }
        body.dark .welcome-input { background: rgba(15,23,42,0.5); border: 1px solid var(--border-dark); color: var(--text-dark); }
        .welcome-input:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(5,150,105,0.15); }
        .welcome-input::placeholder { opacity: 0.6; }

        .btn-continue {
            width: 100%; padding: 16px; font-size: 1.1rem; font-weight: 700;
            border: none; border-radius: 14px; cursor: pointer; color: #fff;
            background: var(--primary-gradient);
            box-shadow: 0 8px 20px rgba(5,150,105,0.25);
            transition: transform 0.3s, box-shadow 0.3s;
            display: flex; align-items: center; justify-content: center; gap: 10px;
        }
        .btn-continue:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(5,150,105,0.35); }
        .btn-continue i { transition: transform 0.3s; }
        .btn-continue:hover i { transform: translateX(-5px); }

        .welcome-error {
            background: rgba(239,68,68,0.15); color: #ef4444;
            padding: 11px; border-radius: 10px; margin-bottom: 18px;
            font-size: 0.9rem; font-weight: 600;
        }

        .welcome-step-indicator { display: flex; justify-content: center; gap: 8px; margin-top: 22px; }
        .step-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(128,128,128,0.3); transition: all 0.3s; }
        .step-dot.active { background: var(--primary-color); width: 28px; border-radius: 10px; }

        /* --- عنوان الحقل داخل صفحة الترحيب --- */
        .field-label { display: block; text-align: right; font-weight: 700; font-size: 0.95rem; margin-bottom: 10px; opacity: 0.9; }

        /* --- نجوم شاشة "قيّم التطبيق" الإلزامية --- */
        .rating-stars { display: flex; flex-direction: row-reverse; justify-content: center; gap: 10px; margin: 10px 0 22px; }
        .rating-star {
            background: none; border: none; cursor: pointer; padding: 4px; font-size: 2.1rem;
            color: rgba(128,128,128,0.35); transition: transform 0.2s ease, color 0.2s ease;
        }
        .rating-star:hover { transform: scale(1.15); }
        .rating-star.active { color: #fbbf24; transform: scale(1.08); }
        .rating-reason-box { margin-bottom: 18px; animation: pollFadeIn 0.4s ease-out; }
        .rating-reason-input { resize: vertical; min-height: 90px; text-align: right; }

        /* --- عرض النجوم للقراءة فقط (لوحة التحكم) --- */
        .rating-stars-readonly { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
        .rating-stars-readonly i { font-size: 0.95rem; color: rgba(128,128,128,0.3); }
        .rating-stars-readonly i.filled { color: #fbbf24; }

        /* --- سلايد اختيار الجنس (توغل منزلق) --- */
        .gender-slider {
            position: relative; display: flex; border-radius: 14px; padding: 5px;
            margin-bottom: 25px; overflow: hidden;
        }
        body.light .gender-slider { background: rgba(5,150,105,0.08); border: 1px solid var(--border-light); }
        body.dark .gender-slider { background: rgba(15,23,42,0.5); border: 1px solid var(--border-dark); }
        .gender-thumb {
            position: absolute; top: 5px; bottom: 5px; left: 5px;
            width: calc(50% - 5px); border-radius: 10px;
            background: var(--primary-gradient); z-index: 1;
            opacity: 0; /* مخفي حتى يختار المستخدم الجنس */
            transform: translateX(100%); /* موضع "ذكر" (يمين) */
            transition: transform 0.3s cubic-bezier(0.25, 1, 0.25, 1), opacity 0.3s;
            box-shadow: 0 4px 12px rgba(5,150,105,0.3);
        }
        .gender-thumb.visible { opacity: 1; }
        .gender-thumb.female { transform: translateX(0); } /* أنثى (يسار) */
        .gender-opt {
            position: relative; z-index: 2; flex: 1; background: transparent; border: none;
            padding: 13px; cursor: pointer; font-weight: 700; font-size: 1rem;
            color: inherit; display: flex; align-items: center; justify-content: center; gap: 8px;
            font-family: 'Tajawal', sans-serif; transition: color 0.3s;
        }
        .gender-opt.active { color: #fff; }

        /* --- سلايد اختيار العمر --- */
        .age-value { font-size: 2.2rem; font-weight: 700; color: var(--primary-color); margin-bottom: 6px; }
        .age-range { -webkit-appearance: none; appearance: none; width: 100%; height: 10px; border-radius: 50px; outline: none; cursor: pointer; }
        body.light .age-range { background: rgba(5,150,105,0.15); }
        body.dark .age-range { background: rgba(255,255,255,0.12); }
        .age-range::-webkit-slider-thumb {
            -webkit-appearance: none; appearance: none; width: 26px; height: 26px;
            border-radius: 50%; background: var(--primary-gradient); cursor: pointer;
            box-shadow: 0 3px 10px rgba(5,150,105,0.4); border: 3px solid #fff;
        }
        .age-range::-moz-range-thumb {
            width: 26px; height: 26px; border-radius: 50%; background: #059669;
            cursor: pointer; box-shadow: 0 3px 10px rgba(5,150,105,0.4); border: 3px solid #fff;
        }
        .age-hint { font-size: 0.8rem; opacity: 0.6; margin: 8px 0 24px; }

        /* --- الأزرار المربعة بتأثير زجاجي وحركة بطيئة ومنسقة --- */
        .button-group { 
            display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 35px; 
        }
        
        .btn-service { 
            display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
            aspect-ratio: 1 / 0.95; padding: 18px 10px; text-align: center;
            font-size: 0.95rem; font-weight: 700; line-height: 1.35;
            border: 2px dashed #2dd4bf; border-radius: 20px; cursor: pointer; text-decoration: none; 
            position: relative; overflow: hidden; backdrop-filter: blur(15px);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
            transition: transform 0.5s cubic-bezier(0.25, 1, 0.25, 1), box-shadow 0.5s, background 0.5s;
        }

        body.light .btn-service { 
            background: rgba(0, 114, 255, 0.10); 
            color: #0056cc; 
            border-color: #2dd4bf;
        }
        body.dark .btn-service { 
            background: rgba(255, 255, 255, 0.06); 
            color: #f8fafc; 
            border-color: #2dd4bf;
        }
        
        /* الحركة والتكبير (scale/translateY) نخصّها فقط بالأجهزة اللي عندها ماوس فعلي،
           لأنه على اللمس (touch) كان الـ hover بينفعّل تلقائياً عند مجرد اللمس (بدون ضغط فعلي)،
           وتكبير عنصر حدّه متقطع (dashed) بيسبب تشوّه/انقطاع بصري بالحدود أثناء التكبير */
        @media (hover: hover) and (pointer: fine) {
            .btn-service:hover { 
                transform: translateY(-5px) scale(1.02); 
                box-shadow: 0 12px 28px var(--btn-hover-shadow);
            }
            body.light .btn-service:hover { background: rgba(0, 114, 255, 0.17); }
            body.dark .btn-service:hover { background: rgba(255, 255, 255, 0.13); }
        }

        /* على اللمس: نكتفي بتفاعل بسيط عند الضغط الفعلي (بدون تكبير) حتى ما ينكسر الإطار المتقطع */
        .btn-service:active { 
            box-shadow: 0 12px 28px var(--btn-hover-shadow);
            transition: box-shadow 0.2s ease, background 0.2s ease;
        }
        body.light .btn-service:active { background: rgba(0, 114, 255, 0.17); }
        body.dark .btn-service:active { background: rgba(255, 255, 255, 0.13); }

        .btn-service i.chevron { display: none; }

        .btn-service::after {
            content: '';
            position: absolute;
            top: 0; left: -150%; width: 50%; height: 100%;
            background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0) 100%);
            transform: skewX(-25deg);
            animation: shineFlare 8s infinite ease-in-out;
        }
        .button-group .btn-service:nth-of-type(1)::after { animation-delay: 0s; }
        .button-group .btn-service:nth-of-type(2)::after { animation-delay: 1.5s; }
        .button-group .btn-service:nth-of-type(3)::after { animation-delay: 3s; }
        .button-group .btn-service:nth-of-type(4)::after { animation-delay: 4.5s; }
        .button-group .btn-service:nth-of-type(5)::after { animation-delay: 6s; }
        .button-group .btn-service:nth-of-type(6)::after { animation-delay: 7.5s; }
        .button-group .btn-service:nth-of-type(7)::after { animation-delay: 9s; }
        .button-group .btn-service:nth-of-type(8)::after { animation-delay: 10.5s; }
        .button-group .btn-service:nth-of-type(9)::after  { animation-delay: 12s; }
        .button-group .btn-service:nth-of-type(10)::after { animation-delay: 13.5s; }

        @keyframes shineFlare { 0% { left: -150%; } 12% { left: 150%; } 100% { left: 150%; } }

        .btn-service span { display: flex; flex-direction: column; align-items: center; gap: 10px; }
        .btn-service span i { 
            font-size: 1.5rem; width: 54px; height: 54px; line-height: 54px; text-align: center; 
            color: var(--primary-color); border-radius: 16px;
        }
        body.light .btn-service span i { background: rgba(0, 114, 255, 0.12); }
        body.dark .btn-service span i { background: rgba(255, 255, 255, 0.08); }

        /* --- ألوان مخصصة ومناسبة لأيقونة كل زر خدمة --- */
        .btn-service .fa-capsules            { color: #e11d48 !important; background: rgba(225, 29, 72, 0.13) !important; } /* الصيدليات: أحمر طبي */
        .btn-service .fa-droplet             { color: #0ea5e9 !important; background: rgba(14, 165, 233, 0.13) !important; } /* دور المياه: أزرق سماوي */
        .btn-service .fa-book-open           { color: #64748b !important; background: rgba(100, 116, 139, 0.15) !important; } /* الوفيات: رمادي وقور */
        .btn-service .fa-hand-holding-heart  { color: #ec4899 !important; background: rgba(236, 72, 153, 0.13) !important; } /* حالات إنسانية: وردي دافئ */
        .btn-service .fa-money-bill-transfer { color: #16a34a !important; background: rgba(22, 163, 74, 0.13) !important; } /* أسعار العملات: أخضر مالي */
        .btn-service .fa-coins               { color: #d97706 !important; background: rgba(217, 119, 6, 0.15) !important; } /* المعادن والذهب: ذهبي */
        .btn-service .fa-phone-volume        { color: #dc2626 !important; background: rgba(220, 38, 38, 0.13) !important; } /* الطوارئ: أحمر تنبيه */
        .btn-service .fa-mosque              { color: #0d9488 !important; background: rgba(13, 148, 136, 0.13) !important; } /* أوقات الصلاة: أخضر مسجدي */
        .btn-service .fa-magnifying-glass    { color: #7c3aed !important; background: rgba(124, 58, 237, 0.14) !important; } /* مفقودات: بنفسجي */
        .btn-service .fa-cloud-sun           { color: #f59e0b !important; background: rgba(245, 158, 11, 0.15) !important; } /* الطقس: برتقالي شمسي */
        .btn-service .fa-bucket               { color: #f97316 !important; background: rgba(249, 115, 22, 0.14) !important; } /* لعبة الدلاء: برتقالي مرح */
        .btn-service .fa-cart-shopping        { color: #0891b2 !important; background: rgba(8, 145, 178, 0.13) !important; } /* بيع وشراء: سماوي تجاري */

        /* --- مجموعة الأزرار الإضافية (تظهر عند الضغط على "عرض المزيد") --- */
        .extra-buttons {
            max-height: 0;
            overflow: hidden;
            opacity: 0;
            margin-bottom: 0;
            transition: max-height 0.5s cubic-bezier(0.25, 1, 0.25, 1), opacity 0.45s ease, margin-bottom 0.45s ease;
        }
        .extra-buttons.open {
            opacity: 1;
            margin-bottom: 14px;
        }

        /* --- زر "عرض المزيد" / "عرض أقل" --- */
        .btn-show-more {
            display: flex; align-items: center; justify-content: center; gap: 10px;
            width: 100%; padding: 13px 20px; margin-bottom: 20px;
            font-size: 0.95rem; font-weight: 700; font-family: 'Tajawal', sans-serif;
            border: 2px dashed #2dd4bf; border-radius: 14px; cursor: pointer;
            background: transparent; transition: transform 0.35s ease, background 0.35s ease;
        }
        body.light .btn-show-more { color: #0056cc; }
        body.dark  .btn-show-more { color: #f8fafc; }
        body.light .btn-show-more:hover { background: rgba(0, 114, 255, 0.10); }
        body.dark  .btn-show-more:hover { background: rgba(255, 255, 255, 0.08); }
        .btn-show-more:hover { transform: translateY(-3px); }
        .btn-show-more span { display: flex; align-items: center; gap: 8px; }
        .btn-show-more i#showMoreIcon { transition: transform 0.4s ease; }
        .btn-show-more i#showMoreIcon.rotated { transform: rotate(180deg); }

        /* --- الزر المتوقّف (قيد الصيانة): يظهر للزائر كزر عادي تماماً، والفرق فقط أنه يُظهر رسالة عند الضغط --- */
        .btn-service.btn-service-maint { cursor: pointer; }
        .maint-icon {
            width: 70px; height: 70px; margin: 0 auto 10px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.9rem; color: #fff;
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
            box-shadow: 0 8px 22px rgba(217, 119, 6, 0.45);
            animation: maintPulse 2s ease-in-out infinite;
        }
        @keyframes maintPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.07); } }

        /* شارة "قريباً" الحمراء أعلى الزر المربع */
        .soon-badge {
            position: absolute; top: 10px; left: 10px;
            background: #ef4444; color: #fff; font-size: 0.65rem; font-weight: 700;
            padding: 4px 9px; border-radius: 7px; letter-spacing: 0.5px;
            box-shadow: 0 2px 8px rgba(239,68,68,0.35);
            animation: soonPulse 1.6s ease-in-out infinite;
        }
        @keyframes soonPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }

        /* --- زر مشاركة التطبيق --- */
        .btn-share {
            display: flex; align-items: center; justify-content: space-between;
            width: 100%; padding: 16px 24px; margin-bottom: 16px;
            font-size: 1.05rem; font-weight: 700; font-family: 'Tajawal', sans-serif;
            color: #fff; border: none; border-radius: 14px; cursor: pointer;
            background: linear-gradient(135deg, #059669 0%, #2dd4bf 100%);
            box-shadow: 0 8px 22px rgba(5,150,105,0.35);
            transition: transform 0.4s ease, box-shadow 0.4s ease;
            position: relative; overflow: hidden;
        }
        .btn-share:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(5,150,105,0.45); }
        .btn-share span { display: flex; align-items: center; gap: 12px; }
        .btn-share span i { font-size: 1.2rem; }
        .btn-share > i { transition: transform 0.4s ease; }
        .btn-share:hover > i { transform: translateY(-4px); }

        /* --- زر الانضمام لمجموعة الواتساب --- */
        .btn-wa-group {
            display: flex; align-items: center; justify-content: space-between;
            width: 100%; padding: 16px 24px; margin-bottom: 30px;
            font-size: 1.05rem; font-weight: 700; font-family: 'Tajawal', sans-serif;
            color: #fff; text-decoration: none; border-radius: 14px; cursor: pointer;
            background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
            box-shadow: 0 8px 22px rgba(37,211,102,0.35);
            transition: transform 0.4s ease, box-shadow 0.4s ease;
            position: relative; overflow: hidden;
        }
        .btn-wa-group:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(37,211,102,0.45); }
        .btn-wa-group span { display: flex; align-items: center; gap: 12px; }
        .btn-wa-group span i { font-size: 1.35rem; }
        .btn-wa-group > i { transition: transform 0.4s ease; }
        .btn-wa-group:hover > i { transform: translateX(-4px); }

        /* --- زر تواصل معنا وقدم شكوى --- */
        .btn-contact {
            display: flex; align-items: center; justify-content: space-between;
            width: 100%; padding: 16px 24px; margin-bottom: 20px;
            font-size: 1.05rem; font-weight: 700; font-family: 'Tajawal', sans-serif;
            color: #fff; border: none; border-radius: 14px; cursor: pointer;
            background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
            box-shadow: 0 8px 22px rgba(139,92,246,0.35);
            transition: transform 0.4s ease, box-shadow 0.4s ease;
            position: relative; overflow: hidden;
        }
        .btn-contact:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(139,92,246,0.45); }
        .btn-contact span { display: flex; align-items: center; gap: 12px; }
        .btn-contact span i { font-size: 1.2rem; }
        .btn-contact > i { transition: transform 0.4s ease; }
        .btn-contact:hover > i { transform: translateX(-4px); }

        /* --- نموذج الشكوى داخل النافذة المنبثقة --- */
        .complaint-form { text-align: right; }
        .complaint-form label { display: block; font-size: 0.85rem; font-weight: 700; margin-bottom: 6px; opacity: 0.85; }
        /* --- قائمة "نوع الشكوى" المخصّصة (بديل جميل عن قائمة المتصفح) --- */
        .ktx-select { position: relative; margin-bottom: 14px; }
        .ktx-select-trigger {
            width: 100%; display: flex; align-items: center; gap: 10px;
            padding: 14px 16px; border-radius: 14px; cursor: pointer;
            font-family: 'Tajawal', sans-serif; font-weight: 600; font-size: 0.95rem;
            text-align: right; direction: rtl;
            transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
        }
        body.light .ktx-select-trigger { background: rgba(5,150,105,0.05); border: 1px solid var(--border-light); color: var(--text-light); }
        body.dark  .ktx-select-trigger { background: rgba(45,212,191,0.06); border: 1px solid var(--border-dark);  color: var(--text-dark); }
        .ktx-select-trigger:hover { border-color: var(--primary-color); }
        .ktx-select.open .ktx-select-trigger { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(5,150,105,0.18); }
        .ktx-select-lead i { color: var(--primary-color); font-size: 1rem; }
        .ktx-select-value { flex: 1; }
        .ktx-select-value.placeholder { color: #94a3b8; font-weight: 500; }
        .ktx-select-caret { color: var(--primary-color); font-size: 0.8rem; transition: transform .25s ease; }
        .ktx-select.open .ktx-select-caret { transform: rotate(180deg); }

        .ktx-select-menu {
            position: absolute; top: calc(100% + 8px); right: 0; left: 0;
            list-style: none; margin: 0; padding: 6px;
            border-radius: 16px; z-index: 50;
            opacity: 0; visibility: hidden; transform: translateY(-8px);
            transition: opacity .2s ease, transform .2s ease, visibility .2s;
            box-shadow: 0 18px 45px rgba(0,0,0,0.28);
            max-height: 260px; overflow-y: auto; -webkit-overflow-scrolling: touch;
        }
        body.light .ktx-select-menu { background: #ffffff; border: 1px solid var(--border-light); }
        body.dark  .ktx-select-menu { background: #1e293b; border: 1px solid var(--border-dark); }
        .ktx-select.open .ktx-select-menu { opacity: 1; visibility: visible; transform: translateY(0); }
        .ktx-select-menu li {
            display: flex; align-items: center; gap: 10px;
            padding: 12px 14px; margin-bottom: 2px; border-radius: 11px; cursor: pointer;
            font-size: 0.95rem; font-weight: 600; direction: rtl; text-align: right;
            transition: background .18s ease, color .18s ease;
        }
        .ktx-select-menu li:last-child { margin-bottom: 0; }
        .ktx-select-menu li i { color: var(--primary-color); width: 20px; text-align: center; font-size: 0.95rem; }
        body.light .ktx-select-menu li:hover { background: rgba(5,150,105,0.08); }
        body.dark  .ktx-select-menu li:hover { background: rgba(45,212,191,0.12); }
        .ktx-select-menu li.selected { background: var(--primary-gradient); color: #fff; }
        .ktx-select-menu li.selected i { color: #fff; }

        /* --- زر إغلاق (X) نافذة الشكوى: يظهر داخل الصندوق ويتناسق مع شاشة الجوال --- */
        #complaintOverlay { align-items: flex-start; overflow-y: auto; padding: 16px 12px; -webkit-overflow-scrolling: touch; }
        #complaintOverlay .ad-box { margin: auto; padding: 22px 20px 24px; }
        #complaintOverlay .ad-top-close {
            top: 12px; left: 12px; right: auto;
            width: 36px; height: 36px;
            font-size: 1rem; line-height: 1;
            display: flex; align-items: center; justify-content: center;
            padding: 0;
            border: 2px solid rgba(255,255,255,0.85);
            box-shadow: 0 6px 16px rgba(239,68,68,0.4);
            z-index: 6;
        }
        #complaintOverlay .ad-top-close i { display: block; line-height: 1; }
        #complaintOverlay .ad-top-close:hover { background: #dc2626; transform: scale(1.08); }

        /* --- تصغير محتوى نافذة الشكوى ليظهر كاملاً دون تمرير كثير --- */
        #complaintOverlay .ad-box h2 { font-size: 1.3rem; margin-bottom: 6px; }
        #complaintOverlay .ad-box > p { font-size: 0.9rem; margin-bottom: 14px; line-height: 1.45; opacity: 0.85; }
        #complaintOverlay .complaint-form label { margin-bottom: 4px; font-size: 0.8rem; }
        #complaintOverlay .complaint-form .welcome-input,
        #complaintOverlay .complaint-form .ktx-select { margin-bottom: 11px; }
        #complaintOverlay .complaint-form input.welcome-input,
        #complaintOverlay .complaint-form .ktx-select-trigger { padding: 12px 14px; }
        #complaintOverlay .complaint-form textarea.welcome-input { min-height: 68px; padding: 12px 14px; }
        #complaintOverlay .complaint-actions { margin-top: 6px; }
        .complaint-form textarea.welcome-input { resize: vertical; min-height: 90px; text-align: right; font-size: 0.95rem; padding: 14px 16px; }
        .complaint-form input.welcome-input { text-align: right; font-size: 0.95rem; padding: 14px 16px; }
        .complaint-form .welcome-input { margin-bottom: 14px; }
        .complaint-form-msg { font-size: 0.85rem; font-weight: 700; margin-bottom: 12px; display: none; padding: 8px 12px; border-radius: 10px; }
        .complaint-form-msg.show { display: block; }
        .complaint-submit-btn { display: flex; align-items: center; justify-content: center; gap: 8px; }
        .complaint-submit-btn:disabled { opacity: 0.7; cursor: default; }
        .complaint-success { display: none; text-align: center; padding: 10px 0 4px; }
        .complaint-success.show { display: block; }
        .complaint-success i { font-size: 2.6rem; color: #10b981; margin-bottom: 10px; display: block; }

        /* --- شارة عدد الرسائل فوق زر تبويب الشكاوى --- */
        .tab-count-badge {
            position: absolute; top: -6px; left: -6px; background: #ef4444; color: #fff;
            font-size: 0.65rem; font-weight: 800; min-width: 18px; height: 18px; border-radius: 50%;
            display: inline-flex; align-items: center; justify-content: center; padding: 0 3px;
            box-shadow: 0 2px 6px rgba(239,68,68,0.4);
        }

        /* --- ضوء حالة القسم: أزرق = مفعّل للمستخدمين، أحمر = لا شيء مفعّل --- */
        .tab-light {
            position: absolute; top: -4px; right: -4px; width: 11px; height: 11px;
            border-radius: 50%; border: 2px solid #0f172a; box-sizing: content-box;
        }
        .tab-light.on  { background: #3b82f6; box-shadow: 0 0 7px 1px rgba(59,130,246,0.85); animation: tabLightPulse 2s ease-in-out infinite; }
        .tab-light.off { background: #ef4444; box-shadow: 0 0 5px 0 rgba(239,68,68,0.55); }
        @keyframes tabLightPulse { 0%,100% { box-shadow: 0 0 6px 1px rgba(59,130,246,0.7); } 50% { box-shadow: 0 0 11px 3px rgba(59,130,246,0.95); } }

        /* --- شبكة تطبيقات المشاركة داخل النافذة المنبثقة --- */
        .share-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 20px; }
        .share-item {
            display: flex; flex-direction: column; align-items: center; gap: 10px;
            text-decoration: none; color: inherit; cursor: pointer;
            padding: 18px 6px; border-radius: 18px;
            border: 1px solid rgba(128,128,128,0.15);
            background: rgba(128,128,128,0.04);
            transition: transform 0.3s cubic-bezier(0.25,1,0.25,1), background 0.3s, box-shadow 0.3s;
            font-family: 'Tajawal', sans-serif;
        }
        .share-item:hover { transform: translateY(-5px); background: rgba(0,114,255,0.06); box-shadow: 0 10px 22px rgba(0,0,0,0.08); }
        .share-icon {
            width: auto; height: auto; border-radius: 0;
            display: flex; align-items: center; justify-content: center;
            line-height: 1; position: relative;
            transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), filter 0.3s;
        }
        .share-icon i { font-size: 3rem; line-height: 1; }
        .share-item:hover .share-icon { transform: scale(1.12) rotate(-6deg); filter: brightness(1.1); }
        .share-item span { font-size: 0.85rem; font-weight: 400; }
        .si-whatsapp { color: #25D366; }
        .si-telegram { color: #229ED9; }
        .si-facebook { color: #1877F2; }
        .si-copy     { color: #8b5cf6; }

        /* --- تنبيه "تم النسخ" --- */
        .copy-toast {
            position: fixed; bottom: 30px; left: 50%;
            transform: translateX(-50%) translateY(20px);
            background: #10b981; color: #fff; padding: 12px 26px; border-radius: 50px;
            font-weight: 700; font-size: 0.95rem; box-shadow: 0 8px 20px rgba(16,185,129,0.35);
            opacity: 0; visibility: hidden; transition: all 0.35s ease; z-index: 10001;
            display: inline-flex; align-items: center; gap: 8px;
        }
        .copy-toast.show { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

        .visitor-counter { display: inline-flex; align-items: center; gap: 8px; font-size: 0.85rem; padding: 8px 16px; border-radius: 50px; font-weight: 500; margin-bottom: 20px; }
        body.light .visitor-counter { background: rgba(0, 114, 255, 0.06); color: #0056cc; }
        body.dark .visitor-counter { background: rgba(255, 255, 255, 0.05); color: #94a3b8; }
        .visitor-counter i { color: var(--primary-color); }

        /* مظهر زر الوضع الليلي المدمج فوق المطور */
        .inline-theme-toggle {
            display: inline-flex; align-items: center; gap: 8px;
            background: var(--primary-gradient); color: #fff;
            padding: 8px 18px; border-radius: 50px; border: none;
            font-size: 0.85rem; font-weight: 600; cursor: pointer;
            margin-bottom: 15px; box-shadow: 0 4px 12px rgba(0,114,255,0.2);
            transition: transform 0.4s ease, box-shadow 0.4s ease;
        }
        .inline-theme-toggle:hover { transform: scale(1.03); box-shadow: 0 6px 15px var(--btn-hover-shadow); }

        /* زر سحب (Switch) أنيق لتوفير الأداء بإيقاف كل تأثيرات الصفحة */
        .fx-switch-wrap {
            display: inline-flex; align-items: center; gap: 11px;
            padding: 8px 16px; border-radius: 50px; margin-bottom: 15px;
            border: 1px solid rgba(128,128,128,0.18);
        }
        body.light .fx-switch-wrap { background: rgba(255,255,255,0.6); }
        body.dark  .fx-switch-wrap { background: rgba(255,255,255,0.06); }
        .fx-switch-label { font-size: 0.85rem; font-weight: 600; display: inline-flex; align-items: center; gap: 7px; }
        .fx-switch-label i { color: #f59e0b; }
        .fx-switch { border: none; background: transparent; padding: 0; cursor: pointer; line-height: 0; }
        .fx-switch-track {
            display: block; width: 48px; height: 27px; border-radius: 50px;
            background: #cbd5e1; position: relative; direction: ltr;
            transition: background .35s ease;
        }
        body.dark .fx-switch-track { background: #475569; }
        .fx-switch-thumb {
            position: absolute; top: 3px; left: 3px;
            width: 21px; height: 21px; border-radius: 50%;
            background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.35);
            transition: transform .35s cubic-bezier(.4,.2,.2,1);
        }
        /* عند تفعيل التوفير: سويتش توفير الأداء فقط يصبح أخضر وينزلق مقبضه */
        body.ktx-no-fx #fxToggle .fx-switch-track { background: linear-gradient(135deg, #22c55e, #16a34a); }
        body.ktx-no-fx #fxToggle .fx-switch-thumb { transform: translateX(21px); }

        /* عند تفعيل الوضع الليلي: سويتش الوضع الليلي فقط يصبح أخضر وينزلق مقبضه */
        body.dark #themeToggle .fx-switch-track { background: linear-gradient(135deg, #22c55e, #16a34a); }
        body.dark #themeToggle .fx-switch-thumb { transform: translateX(21px); }

        /* --- وضع توفير الأداء: يوقف كل حركة/انتقال/تمويه في الصفحة (اللوغو، الأزرار، الشريط، القلب...) ---
           نستخدم animation-play-state:paused ليتجمّد كل شيء عند وضعه الطبيعي بدل أن يقفز لنهايته */
        body.ktx-no-fx *,
        body.ktx-no-fx *::before,
        body.ktx-no-fx *::after {
            animation-play-state: paused !important;
            animation-delay: 0s !important;
            transition: none !important;
            scroll-behavior: auto !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
        }
        /* العناصر التي تبدأ مخفية (opacity:0) وتظهر عبر أنيميشن الدخول: نُظهرها فوراً حتى لا تختفي
           (ملاحظة: عناصر الاستطلاع وتقييم التطبيق استُثنيت من هذا التجميد أعلاه، لذا حُذفت من هذه القائمة
           كي تُكمل أنيميشن ظهورها الطبيعي بدل أن تُجمَّد على opacity:1) */
        body.ktx-no-fx .container,
        body.ktx-no-fx .login-card,
        body.ktx-no-fx .services-title-box,
        body.ktx-no-fx .wisdom-box,
        body.ktx-no-fx .stories-section,
        body.ktx-no-fx .ktx-notif-item {
            animation: none !important;
            opacity: 1 !important;
            transform: none !important;
        }
        /* استثناء السويتش نفسه: نُبقي انزلاقه سلساً حتى في وضع التوفير (حركة واحدة صغيرة لا تؤثر على الأداء) */
        body.ktx-no-fx .fx-switch-track,
        body.ktx-no-fx .fx-switch-thumb {
            animation-play-state: running !important;
            transition: background .35s ease, transform .35s cubic-bezier(.4,.2,.2,1) !important;
        }

        /* ============ استثناءات مقصودة لوضع توفير الأداء ============
           هذه العناصر الأربعة تبقى تأثيراتها (حركة/انتقال/تمويه) تعمل بشكل طبيعي حتى مع تفعيل "توفير الأداء":
           1) رسالة تحديث التطبيق   2) الاستطلاع   3) تقييم التطبيق   4) الإعلان
           نعيد هنا نفس القيم الأصلية المعرّفة لهذه العناصر أعلاه في الملف، لأن الكلاس هنا أعلى تخصيصاً (specificity)
           من السلكتور العام "*" في قاعدة التجميد، فتفوز هذه القواعد عليه تلقائياً. */

        /* --- 1) رسالة تحديث التطبيق --- */
        body.ktx-no-fx .update-overlay {
            transition: all 0.4s ease !important;
            backdrop-filter: blur(10px) !important;
            -webkit-backdrop-filter: blur(10px) !important;
        }
        body.ktx-no-fx .gear-spin-1,
        body.ktx-no-fx .gear-spin-2 {
            animation-play-state: running !important;
        }
        body.ktx-no-fx .update-btn-close {
            transition: transform 0.2s !important;
        }

        /* --- 2) الاستطلاع --- */
        body.ktx-no-fx .poll-widget {
            transition: max-height 0.6s ease, opacity 0.5s ease, margin 0.6s ease, transform 0.5s ease !important;
            animation-play-state: running !important;
        }
        body.ktx-no-fx .poll-body {
            transition: opacity 0.4s ease, transform 0.4s ease !important;
        }
        body.ktx-no-fx .poll-header i {
            animation-play-state: running !important;
        }
        body.ktx-no-fx .poll-option {
            transition: all 0.25s ease !important;
        }
        body.ktx-no-fx .poll-thanks {
            transition: opacity 0.5s ease 0.15s, transform 0.5s ease 0.15s !important;
        }
        body.ktx-no-fx .poll-thanks i {
            animation-play-state: running !important;
        }
        body.ktx-no-fx .poll-admin-fill {
            transition: width 0.8s ease !important;
        }

        /* --- 3) تقييم التطبيق --- */
        body.ktx-no-fx .rating-star {
            transition: transform 0.2s ease, color 0.2s ease !important;
        }
        body.ktx-no-fx .rating-reason-box {
            animation-play-state: running !important;
        }

        /* --- 4) الإعلان --- */
        body.ktx-no-fx #adOverlay {
            transition: all 0.4s ease !important;
        }
        body.ktx-no-fx #adOverlay .ad-box {
            transition: transform 0.4s ease !important;
            backdrop-filter: blur(10px) !important;
            -webkit-backdrop-filter: blur(10px) !important;
        }
        body.ktx-no-fx #adOverlay .ad-btn-close {
            transition: transform 0.2s !important;
        }

        .developer-credits { font-size: 0.85rem; opacity: 0.8; border-top: 1px solid rgba(128, 128, 128, 0.15); padding-top: 15px; }
        .developer-credits i { color: #ef4444; animation: heartbeat 1.5s infinite; margin: 0 3px; }
        @keyframes heartbeat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }

        /* --- نوافذ الإعلانات والمنبثقات العامة الزجاجية --- */
        .ad-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15, 23, 42, 0.75); backdrop-filter: blur(8px); z-index: 10000; display: flex; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: all 0.4s ease; }
        .ad-overlay.show { opacity: 1; visibility: visible; }
        
        .ad-box { padding: 30px; border-radius: 24px; max-width: 90%; width: 400px; position: relative; box-shadow: 0 25px 60px rgba(0,0,0,0.3); transform: scale(0.9); transition: transform 0.4s ease; text-align: center; backdrop-filter: blur(10px); }
        body.light .ad-box { background: rgba(255, 255, 255, 0.95); color: #1e293b; border: 1px solid rgba(0, 114, 255, 0.2); }
        body.dark .ad-box { background: rgba(30, 41, 59, 0.95); color: #f8fafc; border: 1px solid rgba(255, 255, 255, 0.1); }

        .ad-overlay.show .ad-box { transform: scale(1); }
        .ad-box h2 { font-size: 1.5rem; font-weight: 700; margin-bottom: 15px; color: var(--primary-color); }
        .ad-box p { font-size: 1.05rem; opacity: 0.9; margin-bottom: 25px; line-height: 1.5; }
        .ad-box img { width: 100%; height: auto; border-radius: 12px; max-height: 280px; object-fit: contain; margin-bottom: 20px; display: block; }
        .ad-top-close { position: absolute; top: -12px; left: -12px; background: #ef4444; color: white; border: none; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 1rem; font-weight: bold; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(239,68,68,0.3); padding: 0; }
        .ad-top-close i { display: block; line-height: 1; }
        
        .ad-btn-close { display: block; width: 100%; padding: 14px; background: var(--primary-gradient); border: none; border-radius: 12px; color: #fff; font-weight: 700; font-size: 1rem; cursor: pointer; box-shadow: 0 4px 15px rgba(0, 114, 255, 0.2); transition: transform 0.2s; }
        .ad-btn-close:hover { transform: translateY(-2px); }

        /* --- نافذة تعديل الرابط المراقب: تنسيق داكن مستقل يتوافق مع لوحة التحكم على كل المقاسات --- */
        #editLinkOverlay { align-items: flex-start; overflow-y: auto; padding: 16px 12px; -webkit-overflow-scrolling: touch; }
        #editLinkOverlay .editlink-box {
            margin: auto; width: min(420px, 100%); max-width: 420px;
            background: #1e293b; color: #fff; text-align: right;
            border: 1px solid rgba(255,255,255,0.12);
        }
        #editLinkOverlay .editlink-box h2 { color: #00c6ff; font-size: 1.15rem; margin-bottom: 14px; }
        #editLinkOverlay .editlink-box input[type="text"],
        #editLinkOverlay .editlink-box textarea,
        #editLinkOverlay .editlink-box select {
            width: 100%; box-sizing: border-box; padding: 10px; border-radius: 8px;
            border: 1px solid #475569; background: #0f172a; color: #fff;
            margin-bottom: 10px; font-family: inherit; font-size: 0.9rem;
        }
        #editLinkOverlay .editlink-box button[type="submit"] {
            width: 100%; padding: 10px 20px; border: none; border-radius: 8px;
            background: var(--primary-gradient); color: #fff; font-weight: bold;
            cursor: pointer; font-size: 0.95rem;
        }
        #editLinkOverlay .ad-top-close {
            position: absolute; top: 12px; left: 12px; right: auto;
            width: 36px; height: 36px; padding: 0;
            display: flex; align-items: center; justify-content: center;
            background: #ef4444; border-radius: 50%; border: none;
            font-size: 1rem; line-height: 1; z-index: 2;
        }
        #editLinkOverlay .ad-top-close:hover { background: #dc2626; transform: scale(1.08); }

        /* --- تنسيق أجمل خاص بنافذة الإعلان المنبثق: عنوان بارز + صندوقان مقطّعان للصورة والنص --- */
        #adOverlay .ad-box { padding: 50px 22px 24px; }
        #adOverlay .ad-top-close {
            position: absolute; top: 12px; left: 12px; right: auto;
            width: 34px; height: 34px; font-size: 1rem;
            border: 2px solid rgba(255,255,255,0.85);
        }
        #adOverlay .ad-top-close:hover { background: #dc2626; transform: scale(1.08); }
        .ad-popup-header {
            display: flex; align-items: center; justify-content: center; gap: 9px;
            margin: 0 0 18px; padding: 10px 14px; border-radius: 12px;
        }
        body.light .ad-popup-header { background: rgba(45, 212, 191, 0.09); }
        body.dark  .ad-popup-header { background: rgba(45, 212, 191, 0.08); }
        .ad-popup-header i { font-size: 1.05rem; color: #2dd4bf; flex-shrink: 0; }
        #adOverlay .ad-box h2 {
            font-size: 1.15rem; font-weight: 800; margin-bottom: 0; color: var(--primary-color);
            line-height: 1.4;
        }
        .ad-image-frame {
            border: 2px dashed #2dd4bf; border-radius: 16px; padding: 10px; margin-bottom: 18px;
        }
        body.light .ad-image-frame { background: rgba(45, 212, 191, 0.06); }
        body.dark  .ad-image-frame { background: rgba(45, 212, 191, 0.05); }
        #adOverlay .ad-box img { margin-bottom: 0; border-radius: 10px; }
        .ad-desc-frame {
            border: 2px dashed #2dd4bf; border-radius: 16px; padding: 14px 16px; margin-bottom: 20px;
        }
        body.light .ad-desc-frame { background: rgba(45, 212, 191, 0.06); }
        body.dark  .ad-desc-frame { background: rgba(45, 212, 191, 0.05); }
        #adOverlay .ad-box p { margin-bottom: 0; }

        /* --- إعلان "آخر تحديث للتطبيق" بكامل الشاشة (يظهر مرة واحدة لكل زائر) --- */
        .update-overlay { position: fixed; inset: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(2,10,25,0.97), rgba(0,60,110,0.97)); backdrop-filter: blur(10px); z-index: 1000060; display: flex; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: all 0.4s ease; overscroll-behavior: contain; }
        .update-overlay.show { opacity: 1; visibility: visible; }
        .update-box { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 30px 20px; text-align: center; color: #f8fafc; overflow-y: auto; overscroll-behavior: contain; }
        .update-icon { display: flex; align-items: center; justify-content: center; position: relative; width: 120px; height: 100px; margin-bottom: 34px; }
        .update-icon i { position: absolute; color: var(--primary-color); }
        .gear-spin-1 { font-size: 3.6rem; right: 18px; top: 8px; animation: ktxGearSpin 4.5s linear infinite; }
        .gear-spin-2 { font-size: 2.4rem; left: 12px; bottom: 8px; opacity: 0.8; animation: ktxGearSpinReverse 3.2s linear infinite; }
        @keyframes ktxGearSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
        @keyframes ktxGearSpinReverse { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }
        .update-box h2 { font-size: 1.6rem; font-weight: 800; margin-bottom: 8px; }
        .update-box .update-subtitle { opacity: 0.75; font-size: 0.9rem; margin-bottom: 25px; }
        /* كل مجموعة (نص عام / ميزات / إصلاحات أخطاء / إصلاحات طارئة) تظهر داخل مستطيل واحد يجمع كل سطورها */
        .update-group { width: 100%; max-width: 380px; margin: 0 0 14px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; padding: 6px 16px; text-align: right; }
        .update-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; font-size: 0.95rem; line-height: 1.5; }
        .update-row + .update-row { border-top: 1px solid rgba(255,255,255,0.08); }
        .update-row i { font-size: 1.1rem; margin-top: 2px; }
        .update-btn-close { display: block; width: 100%; max-width: 380px; padding: 15px; background: var(--primary-gradient); border: none; border-radius: 14px; color: #fff; font-weight: 700; font-size: 1rem; cursor: pointer; box-shadow: 0 8px 20px rgba(0,114,255,0.3); transition: transform 0.2s; margin-top: 10px; }
        .update-btn-close:hover { transform: translateY(-2px); }
        /* حالة الزر المقفل أثناء عدّاد الانتظار الإجباري قبل السماح بالإغلاق */
        .ad-btn-close.btn-locked, .update-btn-close.btn-locked { opacity: 0.55; cursor: not-allowed; filter: grayscale(0.35); box-shadow: none; }
        .ad-btn-close.btn-locked:hover, .update-btn-close.btn-locked:hover { transform: none; }

        .complaint-actions { display: flex; gap: 10px; margin-top: 10px; }
        .complaint-actions .ad-btn-close, .complaint-actions .ad-btn-secondary { width: auto; flex: 1; margin-top: 0; }
        .ad-btn-secondary { display: block; width: 100%; padding: 14px; background: linear-gradient(135deg,#ef4444 0%,#b91c1c 100%); border: none; border-radius: 12px; color: #fff; font-weight: 700; font-size: 1rem; cursor: pointer; box-shadow: 0 4px 15px rgba(239,68,68,0.25); transition: transform 0.2s, box-shadow 0.2s; }
        .ad-btn-secondary:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(239,68,68,0.35); }

        /* --- لوحة التحكم --- */
        .admin-panel { width: 100%; max-width: 500px; padding: 25px; border-radius: 20px; background: #1e293b; color: #fff; box-shadow: 0 15px 30px rgba(0,0,0,0.25); border: 2px dashed #00c6ff; text-align: right; margin-top: 20px; }
        .admin-panel h3 { margin-bottom: 15px; font-size: 1.2rem; color: #00c6ff; }
        .admin-section { margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #334155; }
        .admin-panel textarea, .admin-panel input[type="text"] { width: 100%; padding: 10px; border-radius: 8px; border: 1px solid #475569; background: #0f172a; color: #fff; margin-bottom: 10px; }
        .admin-panel button { background: var(--primary-gradient); color: white; border: none; padding: 10px 20px; border-radius: 8px; cursor: pointer; font-weight: bold; width: 100%; }
        .admin-panel .btn-danger { background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%); margin-top: 5px; }
        .status-badge { display: inline-block; padding: 4px 10px; border-radius: 50px; font-size: 0.8rem; font-weight: bold; margin-bottom: 10px; }

        /* --- تبويبات لوحة التحكم --- */
        .admin-tabs {
            display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 16px;
            padding-bottom: 12px; border-bottom: 1px solid #334155;
        }
        .admin-tab-btn {
            width: 100%; min-width: 0; position: relative;
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            gap: 5px; min-height: 60px; text-align: center; line-height: 1.25;
            padding: 9px 5px; font-size: 0.68rem; font-weight: 700;
            background: #0f172a; color: #94a3b8; border: 1px solid #334155; border-radius: 12px;
            cursor: pointer; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
        }
        .admin-tab-btn i { font-size: 1rem; }
        .admin-tab-btn:hover { color: #e2e8f0; border-color: #475569; }
        .admin-tab-btn.active { background: var(--primary-gradient); color: #fff; border-color: transparent; box-shadow: 0 6px 16px rgba(0,114,255,0.35); }
        .admin-tab-content { display: none; animation: fadeInPage 0.4s ease-out forwards; }
        .admin-tab-content.active { display: block; }
        .admin-tab-content .admin-section:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
        .bg-success { background-color: #10b981; } .bg-danger { background-color: #ef4444; }

        /* --- مفتاح التبديل (Toggle Switch) لخيارات التفعيل/التعطيل في لوحة التحكم --- */
        .ktx-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
        .ktx-switch-info { display: flex; flex-direction: column; gap: 3px; text-align: right; flex: 1; min-width: 0; }
        .ktx-switch-title { font-weight: 700; font-size: 0.92rem; }
        .ktx-switch-sub { font-size: 0.75rem; opacity: 0.65; line-height: 1.45; }
        .admin-panel .ktx-switch {
            position: relative; flex-shrink: 0; width: 60px; height: 31px; margin: 0;
            padding: 0; border: none; border-radius: 999px; cursor: pointer;
            background: #64748b; transition: background 0.25s ease; box-shadow: inset 0 1px 3px rgba(0,0,0,0.25);
        }
        .admin-panel .ktx-switch.on  { background: #1ba8d5; }
        .admin-panel .ktx-switch.off { background: #64748b; }
        .ktx-switch .knob {
            position: absolute; top: 3px; width: 25px; height: 25px; border-radius: 50%;
            background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.4); transition: all 0.25s ease;
        }
        .ktx-switch.on  .knob { right: 3px; }
        .ktx-switch.off .knob { left: 3px; }
        .ktx-switch i { position: absolute; top: 50%; transform: translateY(-50%); color: #fff; font-size: 0.78rem; }
        .ktx-switch.on  i { left: 10px; }
        .ktx-switch.off i { right: 10px; }

        /* --- بطاقات إعدادات أزرار الخدمات في لوحة التحكم --- */
        .btn-cfg-card { border: 1px solid #334155; border-radius: 14px; padding: 14px; background: rgba(255,255,255,0.02); transition: border-color 0.3s, background 0.3s; }
        .btn-cfg-card.is-off { border-color: rgba(245,158,11,0.5); background: rgba(245,158,11,0.06); }
        .btn-cfg-head { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
        .btn-cfg-ico { width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; flex-shrink: 0; }
        .btn-cfg-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
        .btn-cfg-name { font-weight: 700; font-size: 0.95rem; }
        .btn-cfg-state { font-size: 0.72rem; font-weight: 600; }
        .btn-cfg-state.st-on  { color: #10b981; }
        .btn-cfg-state.st-off { color: #f59e0b; }
        .btn-cfg-label { display: block; font-size: 0.78rem; opacity: 0.8; margin: 10px 0 5px; }
        .btn-cfg-label i { margin-left: 4px; opacity: 0.7; }
        .btn-cfg-input {
            width: 100%; box-sizing: border-box; padding: 9px 11px; border-radius: 9px;
            border: 1px solid #334155; background: rgba(15,23,42,0.6); color: inherit;
            font-size: 0.85rem; font-family: inherit; resize: vertical;
        }
        .btn-cfg-input:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.18); }
        input.btn-cfg-input[dir="ltr"] { text-align: left; }
        .btn-cfg-save {
            margin-top: 12px; width: 100%; padding: 9px; border: none; border-radius: 9px; cursor: pointer;
            font-family: inherit; font-weight: 700; font-size: 0.85rem; color: #fff;
            background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
        }
        .btn-cfg-save:hover { filter: brightness(1.08); }
        body.light .btn-cfg-input { background: rgba(0,0,0,0.03); }
        body.light .btn-cfg-card { border-color: #e2e8f0; }

        /* --- صفحة تسجيل دخول لوحة التحكم --- */
        .login-card {
            width: 100%; max-width: 400px; padding: 40px 30px; border-radius: 24px;
            text-align: center; backdrop-filter: blur(10px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.15); border: 2px dashed #00c6ff;
            animation: fadeInPage 0.6s ease-out forwards; opacity: 0; transform: translateY(20px);
        }
        body.light .login-card { background: var(--card-bg-light); }
        body.dark .login-card { background: var(--card-bg-dark); }
        .login-card .lock-icon {
            width: 70px; height: 70px; margin: 0 auto 18px; border-radius: 50%;
            background: var(--primary-gradient); display: flex; align-items: center; justify-content: center;
            font-size: 1.8rem; color: #fff; box-shadow: 0 8px 20px rgba(0,114,255,0.3);
        }
        .login-card h2 { font-size: 1.4rem; margin-bottom: 6px; }
        .login-card p { font-size: 0.9rem; opacity: 0.7; margin-bottom: 24px; }
        .login-input {
            width: 100%; padding: 15px 20px; font-size: 1.1rem; text-align: center;
            border-radius: 14px; outline: none; margin-bottom: 18px; letter-spacing: 3px;
            font-family: 'Tajawal', sans-serif;
        }
        body.light .login-input { background: rgba(255,255,255,0.7); border: 1px solid var(--border-light); color: var(--text-light); }
        body.dark .login-input { background: rgba(15,23,42,0.5); border: 1px solid var(--border-dark); color: var(--text-dark); }
        .login-input:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(0,114,255,0.15); }
        .login-error { background: rgba(239,68,68,0.15); color: #ef4444; padding: 11px; border-radius: 10px; margin-bottom: 18px; font-size: 0.9rem; font-weight: 600; }

        /* --- جدول سجل الزوار في لوحة التحكم --- */
        .log-scroll { max-height: 320px; overflow: auto; border-radius: 8px; border: 1px solid #334155; margin-top: 10px; }
        .log-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
        .log-table th, .log-table td { padding: 8px 6px; text-align: center; border-bottom: 1px solid #334155; white-space: nowrap; }
        .log-table th { color: #00c6ff; background: #0f172a; position: sticky; top: 0; }
        .log-count-badge { display:inline-block; background: var(--primary-gradient); color:#fff; padding: 2px 10px; border-radius: 50px; font-size: 0.75rem; margin-right: 6px; }
        .log-table .user-row { cursor: pointer; transition: background 0.2s; }
        .log-table .user-row:hover { background: rgba(0,198,255,0.08); }
        .log-table .user-row.open .toggle-ico { transform: rotate(180deg); }
        .log-table .toggle-ico { transition: transform 0.3s; }
        .log-table .detail-row td { font-size: 0.8rem; }

        /* --- قسم "من يتصفح الآن" في لوحة التحكم --- */
        .online-badge-live {
            display: inline-flex; align-items: center; gap: 7px;
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            color: #fff; padding: 4px 12px; border-radius: 50px;
            font-size: 0.78rem; font-weight: 700; margin-right: 6px;
        }
        .online-dot {
            width: 8px; height: 8px; border-radius: 50%; background: #d1fae5;
            animation: onlinePulse 1.4s ease-in-out infinite;
        }
        @keyframes onlinePulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.7); } }
        .online-scroll { max-height: 220px; overflow: auto; border-radius: 8px; border: 1px solid #334155; margin-top: 10px; }
        .online-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
        .online-table th, .online-table td { padding: 8px 6px; text-align: center; border-bottom: 1px solid #334155; white-space: nowrap; }
        .online-table th { color: #10b981; background: #0f172a; position: sticky; top: 0; }
        .online-empty { opacity: 0.6; font-size: 0.85rem; padding: 10px 0; text-align: center; }
        .online-last-seen { color: #94a3b8; font-size: 0.72rem; }

        /* --- منحنى عدد الزوار اليومي (Chart.js) --- */
        .visitors-chart-wrap {
            background: #0f172a; border: 1px solid #334155; border-radius: 12px;
            padding: 14px 10px 8px; margin-top: 6px;
            position: relative; height: 260px;
        }
        #visitorsChart { width: 100% !important; height: 100% !important; display: block; }

        /* --- جدول سجل الزوار اليومي --- */
        .daily-log-scroll { max-height: 300px; overflow: auto; border-radius: 8px; border: 1px solid #334155; margin-top: 10px; }
        .daily-log-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
        .daily-log-table th, .daily-log-table td { padding: 10px 8px; text-align: center; border-bottom: 1px solid #334155; white-space: nowrap; }
        .daily-log-table tbody tr:last-child td { border-bottom: none; }
        .daily-log-table th { color: #00c6ff; background: #0f172a; position: sticky; top: 0; font-weight: 700; }
        .daily-log-table td strong { color: #fff; font-size: 0.95rem; }
        .daily-log-table tbody tr:hover { background: rgba(0,198,255,0.05); }
        .daily-log-today { background: rgba(16,185,129,0.08); }
        .daily-log-table td:first-child { display: flex; align-items: center; justify-content: flex-start; gap: 6px; text-align: right; }
        .daily-log-dayname { display: inline-block; margin-right: 0; font-size: 0.68rem; opacity: 0.6; }
        .daily-log-badge {
            display: inline-block; margin-right: 0; padding: 1px 8px; border-radius: 20px;
            font-size: 0.65rem; font-weight: 700; color: #fff;
            background: linear-gradient(135deg, #10b981, #059669);
        }

        /* --- سجل نقرات أزرار الخدمات --- */
        .btn-clicks-chips { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 12px 0 4px; }
        .btn-click-chip {
            display: flex; align-items: center; gap: 8px;
            background: #0f172a; border: 1px solid #334155; border-radius: 10px; padding: 8px 10px;
        }
        .btn-click-chip i { font-size: 0.95rem; width: 20px; text-align: center; }
        .btn-click-chip .bcc-label { font-size: 0.72rem; opacity: 0.85; flex: 1; line-height: 1.25; }
        .btn-click-chip .bcc-nums { font-size: 0.72rem; font-weight: 700; color: #fff; white-space: nowrap; }
        .btn-click-chip .bcc-today { color: #10b981; }
        .btn-clicks-table th .bch-ico { font-size: 0.95rem; }
        .btn-clicks-table td.bc-zero { opacity: 0.35; }
        .btn-clicks-table td.bc-total strong,
        .btn-clicks-table th.bc-total { color: #00c6ff; }

        /* --- بطاقات إحصائيات لوحة التحكم (زوار اليوم) --- */
        .stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px; }
        .stat-card {
            background: #0f172a; border: 1px solid #334155; border-radius: 12px;
            padding: 14px 8px; text-align: center; position: relative; overflow: hidden;
        }
        .stat-card::before {
            content: ''; position: absolute; top: 0; right: 0; left: 0; height: 3px;
            background: var(--primary-gradient);
        }
        .stat-card .stat-ico { font-size: 1.1rem; color: #00c6ff; margin-bottom: 6px; }
        .stat-card .stat-num { font-size: 1.5rem; font-weight: 700; color: #fff; line-height: 1.1; }
        .stat-card .stat-lbl { font-size: 0.72rem; opacity: 0.7; margin-top: 4px; }
        .stat-card.stat-green::before { background: linear-gradient(135deg, #10b981, #059669); }
        .stat-card.stat-green .stat-ico { color: #10b981; }
        .stat-card.stat-pink::before { background: linear-gradient(135deg, #f9ce34, #ee2a7b); }
        .stat-card.stat-pink .stat-ico { color: #ee2a7b; }

        /* ============ استطلاع الرأي: يظهر أسفل اللوغو مباشرةً للزوار ============ */
        .poll-widget {
            width: 100%; max-width: 380px; margin: 4px auto 26px; border-radius: 18px;
            position: relative; overflow: hidden; text-align: right;
            transition: max-height 0.6s ease, opacity 0.5s ease, margin 0.6s ease, transform 0.5s ease;
            max-height: 520px; opacity: 1;
            animation: pollFadeIn 0.7s ease-out;
        }
        body.light .poll-widget { background: rgba(0, 114, 255, 0.05); border: 1.5px dashed #2dd4bf; }
        body.dark  .poll-widget { background: rgba(15, 23, 42, 0.55); border: 1.5px dashed #2dd4bf; }
        @keyframes pollFadeIn { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }

        .poll-widget.collapsed { max-height: 0; opacity: 0; margin: 0 auto; transform: scale(0.95); border-width: 0; }

        .poll-stack { display: grid; }
        .poll-stack > * { grid-area: 1 / 1; }

        .poll-body { padding: 18px 18px 20px; transition: opacity 0.4s ease, transform 0.4s ease; z-index: 2; }
        .poll-widget.voted .poll-body { opacity: 0; transform: scale(0.96); pointer-events: none; }

        .poll-header {
            display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 0.78rem;
            color: #00c6ff; margin-bottom: 10px; letter-spacing: 0.3px;
        }
        .poll-header i { animation: pollHeaderSpin 3s linear infinite; }
        @keyframes pollHeaderSpin { 0%, 85%, 100% { transform: rotate(0deg); } 90% { transform: rotate(-12deg); } 95% { transform: rotate(12deg); } }

        .poll-question { font-size: 1.02rem; font-weight: 800; margin-bottom: 14px; line-height: 1.55; }

        .poll-options { display: flex; flex-direction: column; gap: 9px; }
        .poll-option {
            width: 100%; text-align: right; padding: 12px 16px; border-radius: 13px; cursor: pointer;
            font-family: 'Tajawal', sans-serif; font-size: 0.9rem; font-weight: 700;
            border: 1.5px solid #2dd4bf; background: transparent; transition: all 0.25s ease;
        }
        body.light .poll-option { color: var(--text-light); }
        body.dark  .poll-option { color: var(--text-dark); }
        .poll-option:hover:not(.disabled) { border-color: #2dd4bf; background: rgba(45, 212, 191, 0.08); transform: translateX(-4px); }
        .poll-option:active:not(.disabled) { transform: translateX(-2px) scale(0.98); }
        .poll-option.selected { background: var(--primary-gradient); color: #fff; border-color: transparent; box-shadow: 0 6px 16px rgba(0,114,255,0.3); }
        .poll-option.disabled { cursor: default; opacity: 0.55; }

        .poll-thanks {
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            gap: 8px; padding: 26px 20px; opacity: 0; transform: scale(0.85); pointer-events: none;
            transition: opacity 0.5s ease 0.15s, transform 0.5s ease 0.15s; z-index: 1;
        }
        .poll-widget.voted .poll-thanks { opacity: 1; transform: scale(1); z-index: 3; }
        .poll-thanks i { font-size: 2.1rem; color: #10b981; animation: pollPop 0.6s ease; }
        .poll-thanks span { font-size: 1.05rem; font-weight: 800; color: #10b981; }
        @keyframes pollPop { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.25); opacity: 1; } 100% { transform: scale(1); } }

        /* --- شريط تقدّم نتائج الاستطلاع داخل لوحة التحكم --- */
        .poll-admin-bar-row { margin-bottom: 11px; }
        .poll-admin-label { display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; margin-bottom: 5px; gap: 8px; }
        .poll-admin-label span:first-child { font-weight: 700; }
        .poll-admin-label span:last-child { opacity: 0.75; white-space: nowrap; font-size: 0.75rem; }
        .poll-admin-track { background: #0f172a; border-radius: 8px; height: 11px; overflow: hidden; border: 1px solid #334155; }
        .poll-admin-fill { height: 100%; background: var(--primary-gradient); border-radius: 8px; transition: width 0.8s ease; }

        /* ============ الحالات (ستوري): صندوق مستطيل مقطّع بعنوان في الأعلى يمين ============ */
        .stories-section {
            width: 100%; box-sizing: border-box;
            margin: 6px 0 24px 0; padding: 8px 6px 10px;
            position: relative; background: transparent; /* بلا لون من الداخل */
            border-radius: 16px; text-align: center; /* لتوسيط العنوان (legend) في منتصف الأعلى */
            min-width: 0; min-inline-size: 0; /* حتى لا يجبر الصندوق على التمدّد ويبقى التمرير الأفقي شغّالاً */
            animation: fadeInPage 0.9s ease-out forwards;
        }
        /* لون الإطار المقطّع: أسود في النهاري، أبيض في الليلي */
        body.light .stories-section { border: 2px dashed #000000; }
        body.dark  .stories-section { border: 2px dashed #ffffff; }
        /* عنوان الصندوق في منتصف الأعلى (يقطع الإطار تلقائياً لأنه legend) */
        .stories-section > .stories-title {
            padding: 0 12px; margin: 0 auto;
            font-size: 0.9rem; font-weight: 800; letter-spacing: 0.2px;
        }
        body.light .stories-section > .stories-title { color: #000000; }
        body.dark  .stories-section > .stories-title { color: #ffffff; }

        .stories-bar {
            width: 100%; text-align: right; white-space: nowrap;
            overflow-x: auto; overflow-y: hidden; padding: 4px 2px 6px 2px; direction: rtl;
            scrollbar-width: none; -ms-overflow-style: none;
        }
        .stories-bar::-webkit-scrollbar { display: none; }
        .story-item {
            display: inline-flex; flex-direction: column; align-items: center; gap: 7px;
            cursor: pointer; width: 74px; margin: 0 5px; vertical-align: top; white-space: normal;
        }
        .story-ring {
            width: 66px; height: 66px; border-radius: 50%; padding: 3px;
            background: linear-gradient(135deg, #f9ce34 0%, #ee2a7b 45%, #6228d7 100%);
            display: flex; align-items: center; justify-content: center;
            transition: transform 0.2s ease; box-shadow: 0 4px 14px rgba(238,42,123,0.28);
        }
        .story-item:active .story-ring { transform: scale(0.92); }
        /* دائرة الحالة بعد مشاهدتها: رمادية بدل التدرج الملون (متل الانستغرام) */
        .story-ring.seen {
            background: linear-gradient(135deg, #cbd5e1 0%, #94a3b8 100%);
            box-shadow: none;
        }
        body.dark .story-ring.seen {
            background: linear-gradient(135deg, #475569 0%, #334155 100%);
        }
        .story-thumb {
            width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
            position: relative; border: 2px solid; background: #0f172a;
        }
        body.light .story-thumb { border-color: #ffffff; }
        body.dark  .story-thumb { border-color: #1e293b; }
        .story-thumb img, .story-thumb video { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
        .story-play-badge {
            position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
            color: #fff; font-size: 0.8rem; background: rgba(0,0,0,0.25);
        }
        .story-label {
            font-size: 0.72rem; font-weight: 500; max-width: 74px; text-align: center;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        body.light .story-label { color: #1e293b; }
        body.dark  .story-label { color: #f8fafc; opacity: 0.92; }

        /* --- الإطار المتحرك مرة واحدة حول الحالة غير المقروءة عند فتح الصفحة --- */
        .story-ring { position: relative; overflow: hidden; }
        .story-ring .story-thumb { position: relative; z-index: 2; }
        .ring-spin {
            display: none; position: absolute; top: 50%; left: 50%;
            width: 200%; height: 200%; z-index: 1; pointer-events: none;
            transform: translate(-50%, -50%) rotate(0deg);
            background: conic-gradient(from 0deg,
                #f9ce34 0deg, #ee2a7b 60deg, #6228d7 120deg, #ee2a7b 180deg,
                #f9ce34 230deg, #ffffff 275deg, #f9ce34 310deg, #ee2a7b 360deg);
        }
        /* تعمل الحركة مرة واحدة فقط عند تحميل الصفحة ثم يختفي الوهج ويبقى الإطار الملوّن الثابت */
        .story-ring.spin .ring-spin { display: block; animation: ktxRingOnce 1.25s linear both; }
        @keyframes ktxRingOnce {
            0%   { transform: translate(-50%, -50%) rotate(0deg);   opacity: 1; }
            78%  { opacity: 1; }
            100% { transform: translate(-50%, -50%) rotate(360deg); opacity: 0; }
        }

        /* ============ الحالات بشكل بطاقات مستطيلة (متل صور الأفلام) ============ */
        .stories-bar.rect-mode .story-item { width: 116px; margin: 0 6px; }
        .stories-bar.rect-mode .story-ring {
            width: 112px; height: 168px; border-radius: 18px; padding: 3px;
            box-shadow: 0 8px 20px rgba(238,42,123,0.28);
        }
        body.dark .stories-bar.rect-mode .story-ring.seen,
        .stories-bar.rect-mode .story-ring.seen { box-shadow: 0 6px 16px rgba(0,0,0,0.25); }
        .stories-bar.rect-mode .story-thumb { border-radius: 15px; }
        .story-play-badge { z-index: 3; }
        .stories-bar.rect-mode .story-play-badge { font-size: 1.4rem; background: rgba(0,0,0,0.28); }
        .stories-bar.rect-mode .story-label {
            max-width: 116px; font-size: 0.78rem; font-weight: 600; margin-top: 2px;
        }
        /* تدرّج خفيف أسفل البطاقة ليبرز الاسم فوق الصورة إن رغبت لاحقاً */
        .stories-bar.rect-mode .story-thumb::after {
            content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 42%;
            background: linear-gradient(to top, rgba(0,0,0,0.45), transparent);
            border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; z-index: 1;
        }

        /* ============ عارض الحالات بملء الشاشة ============ */
        .story-viewer {
            position: fixed; inset: 0; background: #000; z-index: 10002;
            display: none; flex-direction: column; align-items: center; justify-content: center;
        }
        .story-viewer.show { display: flex; }
        .story-progress {
            position: absolute; top: 10px; left: 10px; right: 10px;
            display: flex; gap: 4px; z-index: 6; direction: ltr;
        }
        .sp-bar { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,0.3); overflow: hidden; }
        .sp-fill { height: 100%; width: 0%; background: #fff; border-radius: 3px; }
        .story-header {
            position: absolute; top: 22px; left: 14px; right: 14px; z-index: 6;
            display: flex; align-items: center; justify-content: space-between; color: #fff;
        }
        .story-header-info { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.9rem; text-shadow: 0 1px 4px rgba(0,0,0,0.6); }
        .story-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; background: #fff; }
        .story-close { background: none; border: none; color: #fff; font-size: 1.9rem; cursor: pointer; line-height: 1; padding: 0 6px; }
        .story-stage { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; max-width: 520px; }
        .story-media { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
        .story-caption {
            position: absolute; bottom: 100px; left: 20px; right: 20px; z-index: 6;
            color: #fff; text-align: center; font-size: 1.05rem; font-weight: 500; line-height: 1.5;
            background: rgba(0,0,0,0.42); padding: 10px 16px; border-radius: 14px; backdrop-filter: blur(4px);
        }
        /* --- زر الإعجاب (لايك) داخل عارض الحالة --- */
        .story-like-btn {
            position: absolute; z-index: 7; bottom: 38px; left: 50%; transform: translateX(-50%);
            display: inline-flex; align-items: center; gap: 9px;
            background: rgba(0,0,0,0.42); backdrop-filter: blur(4px);
            border: none; border-radius: 50px; padding: 9px 20px; cursor: pointer; color: #fff;
            -webkit-tap-highlight-color: transparent; transition: background .2s ease;
        }
        .story-like-btn:active { background: rgba(0,0,0,0.6); }
        .story-like-btn i { font-size: 1.35rem; line-height: 1; transition: transform .18s ease, color .18s ease; }
        .story-like-btn.liked i { color: #ff2d55; }
        .story-like-btn .slc-count {
            font-size: 0.95rem; font-weight: 800; direction: ltr; min-width: 8px;
            font-family: Arial, Helvetica, sans-serif; line-height: 1;
        }
        .story-like-btn.pop i { animation: ktxLikePop .45s ease; }
        @keyframes ktxLikePop {
            0% { transform: scale(1); } 40% { transform: scale(1.4); } 70% { transform: scale(0.9); } 100% { transform: scale(1); }
        }
        .story-nav { position: absolute; top: 0; bottom: 0; width: 50%; z-index: 5; }
        .story-nav-prev { right: 0; }
        .story-nav-next { left: 0; }

        /* ============ إدارة الحالات في لوحة التحكم ============ */
        .stories-admin-list { display: flex; flex-direction: column; gap: 8px; }
        .story-admin-row { display: flex; align-items: center; gap: 10px; background: #0f172a; border: 1px solid #334155; border-radius: 10px; padding: 8px 10px; }
        .story-admin-thumb { width: 44px; height: 44px; border-radius: 8px; overflow: hidden; flex: 0 0 auto; background: #1e293b; display: flex; align-items: center; justify-content: center; color: #00c6ff; font-size: 1.1rem; }
        .story-admin-thumb img { width: 100%; height: 100%; object-fit: cover; }
        .story-admin-info { flex: 1; min-width: 0; text-align: right; }
        .story-admin-cap { font-size: 0.88rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .story-views-badge {
            display: inline-block; background: rgba(238,42,123,0.15); color: #f472b6;
            padding: 1px 8px; border-radius: 50px; font-size: 0.68rem; font-weight: 700; margin-right: 6px;
        }
        .story-likes-badge {
            display: inline-block; background: rgba(255,45,85,0.16); color: #ff6b81;
            padding: 1px 8px; border-radius: 50px; font-size: 0.68rem; font-weight: 700; margin-right: 6px;
        }
        .story-admin-time { font-size: 0.72rem; opacity: 0.6; margin-top: 2px; }

        /* --- لوحة تفاصيل المشاهدين/المعجبين داخل بطاقة الحالة بلوحة التحكم --- */
        .story-admin-row { flex-wrap: wrap; }
        .story-details { width: 100%; margin-top: 6px; }
        .story-details > summary {
            list-style: none; cursor: pointer; user-select: none;
            display: inline-flex; align-items: center; gap: 7px;
            background: rgba(0,198,255,0.12); color: #38bdf8;
            padding: 6px 12px; border-radius: 8px; font-size: 0.76rem; font-weight: 700;
            border: 1px solid rgba(0,198,255,0.25); transition: background .18s ease;
        }
        .story-details > summary::-webkit-details-marker { display: none; }
        .story-details > summary:hover { background: rgba(0,198,255,0.2); }
        .story-details[open] > summary { background: rgba(0,198,255,0.22); border-radius: 8px 8px 0 0; }
        .story-details > summary .chev { transition: transform .2s ease; font-size: 0.7rem; }
        .story-details[open] > summary .chev { transform: rotate(180deg); }
        .viewers-box {
            background: #0b1220; border: 1px solid rgba(0,198,255,0.25); border-top: none;
            border-radius: 0 8px 8px 8px; padding: 8px; margin-top: -1px;
            max-height: 240px; overflow-y: auto;
        }
        .viewers-box .vw-empty { font-size: 0.8rem; opacity: 0.7; padding: 6px; text-align: center; }
        .viewers-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
        .viewers-list li {
            display: flex; align-items: center; gap: 8px;
            background: #111c30; border-radius: 8px; padding: 6px 10px; font-size: 0.8rem;
        }
        .vw-avatar {
            width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
            background: linear-gradient(135deg,#00c6ff,#0072ff); color: #fff;
            display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.8rem;
        }
        .vw-name { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .vw-name.anon { opacity: 0.6; font-weight: 500; font-style: italic; }
        .vw-liked { color: #ff2d55; font-size: 0.85rem; flex: 0 0 auto; }
        .vw-time { font-size: 0.68rem; opacity: 0.55; flex: 0 0 auto; direction: ltr; }
        .vw-legend { font-size: 0.7rem; opacity: 0.6; margin: 2px 0 8px; display: flex; gap: 12px; }
        .vw-legend i { color: #ff2d55; }

        /* --- منتقي شكل الحالات (دائري / مستطيل) الأنيق --- */
        .shape-picker { display: flex; gap: 10px; margin-top: 4px; }
        .shape-picker .shape-opt {
            flex: 1; width: auto; margin: 0; padding: 12px 8px 10px; cursor: pointer;
            background: #0b1220; border: 2px solid #334155; border-radius: 14px;
            display: flex; flex-direction: column; align-items: center; gap: 8px;
            color: #cbd5e1; font-weight: 700; font-size: 0.82rem; transition: all .2s ease;
            box-shadow: none;
        }
        .shape-picker .shape-opt:hover { border-color: #475569; transform: translateY(-1px); }
        .shape-picker .shape-opt.active {
            border-color: #ee2a7b; color: #fff;
            background: linear-gradient(160deg, rgba(238,42,123,0.18), rgba(98,40,215,0.14));
            box-shadow: 0 6px 18px rgba(238,42,123,0.25);
        }
        .shape-picker .shape-opt.active .shape-check { opacity: 1; transform: scale(1); }
        .shape-check {
            position: absolute; top: 8px; left: 8px; width: 20px; height: 20px; border-radius: 50%;
            background: #ee2a7b; color: #fff; display: flex; align-items: center; justify-content: center;
            font-size: 0.7rem; opacity: 0; transform: scale(0.4); transition: all .2s ease;
        }
        .shape-opt { position: relative; }
        .shape-demo { display: flex; gap: 5px; align-items: flex-end; height: 40px; }
        .shape-demo .d-circle {
            width: 26px; height: 26px; border-radius: 50%; padding: 2px;
            background: linear-gradient(135deg,#f9ce34,#ee2a7b 55%,#6228d7);
        }
        .shape-demo .d-circle i { display: block; width: 100%; height: 100%; border-radius: 50%; background: #0b1220; }
        .shape-demo .d-rect {
            width: 22px; height: 34px; border-radius: 6px; padding: 2px;
            background: linear-gradient(135deg,#f9ce34,#ee2a7b 55%,#6228d7);
        }
        .shape-demo .d-rect i { display: block; width: 100%; height: 100%; border-radius: 4px; background: #0b1220; }

        /* --- مؤشر الرسائل غير المقروءة في تبويب الشكاوى --- */
        .cmp-dot {
            display: inline-block; width: 9px; height: 9px; border-radius: 50%;
            background: #ef4444; margin-left: 6px; vertical-align: middle;
            box-shadow: 0 0 0 3px rgba(239,68,68,0.18);
            animation: cmpDotPulse 1.6s infinite;
        }
        .cmp-row:not(.cmp-unread) .cmp-dot { display: none; }
        .cmp-unread td { font-weight: 700; }
        .cmp-unread { background: rgba(239,68,68,0.06); }
        @keyframes cmpDotPulse {
            0%, 100% { box-shadow: 0 0 0 3px rgba(239,68,68,0.18); }
            50%      { box-shadow: 0 0 0 6px rgba(239,68,68,0.05); }
        }

        /* --- الرسالة العائمة: زر دائري ثابت في زاوية الصفحة (يسار) --- */
        .fmsg-wrap { position: fixed; left: 18px; bottom: 20px; z-index: 9000; direction: rtl; }
        .fmsg-fab {
            position: relative; width: 60px; height: 60px; border-radius: 50%;
            background: linear-gradient(135deg, #00c6ff 0%, #0072ff 100%);
            color: #fff; border: none; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.5rem; box-shadow: 0 10px 26px rgba(0,114,255,0.45);
            transition: transform .25s ease, box-shadow .25s ease;
        }
        .fmsg-fab:hover { transform: scale(1.08); box-shadow: 0 14px 32px rgba(0,114,255,0.55); }
        .fmsg-fab:active { transform: scale(0.94); }
        .fmsg-badge {
            position: absolute; top: -4px; right: -4px;
            min-width: 20px; height: 20px; padding: 0 5px; border-radius: 50px;
            background: #ef4444; color: #fff; font-size: 0.72rem; font-weight: 800;
            display: flex; align-items: center; justify-content: center;
            border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.25);
            animation: fmsgBadgePulse 1.5s infinite;
            direction: ltr; font-family: Arial, Helvetica, sans-serif;
            font-feature-settings: "locl" 0, "tnum" 1; line-height: 1;
        }
        @keyframes fmsgBadgePulse {
            0%, 100% { transform: scale(1); }
            50%      { transform: scale(1.18); }
        }
        /* الفقاعة المتصلة بالزر */
        .fmsg-bubble {
            position: absolute; left: 0; bottom: 74px; width: 260px; max-width: 78vw;
            background: #ffffff; color: #1e293b; text-align: right;
            border-radius: 16px; padding: 16px 16px 14px; line-height: 1.7;
            box-shadow: 0 18px 45px rgba(0,0,0,0.28);
            opacity: 0; visibility: hidden; transform: translateY(10px) scale(0.96);
            transform-origin: bottom right;
            transition: opacity .25s ease, transform .25s ease, visibility .25s;
        }
        body.dark .fmsg-bubble { background: #1e293b; color: #e2e8f0; border: 1px solid var(--border-dark); }
        .fmsg-wrap.open .fmsg-bubble { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
        /* ذيل الفقاعة يشير نحو الزر */
        .fmsg-bubble::after {
            content: ''; position: absolute; left: 22px; bottom: -9px;
            width: 18px; height: 18px; background: inherit;
            border-bottom-right-radius: 4px; transform: rotate(45deg);
            box-shadow: 4px 4px 8px rgba(0,0,0,0.06);
        }
        body.dark .fmsg-bubble::after { border-right: 1px solid var(--border-dark); border-bottom: 1px solid var(--border-dark); }
        .fmsg-bubble-head {
            display: flex; align-items: center; gap: 8px;
            font-weight: 800; font-size: 0.95rem; color: #0072ff; margin-bottom: 8px;
        }
        body.dark .fmsg-bubble-head { color: #00c6ff; }
        .fmsg-bubble-text { font-size: 0.9rem; white-space: pre-line; }
        .fmsg-bubble-close {
            position: absolute; top: 8px; left: 10px; background: transparent; border: none;
            color: #94a3b8; font-size: 1.15rem; cursor: pointer; line-height: 1; padding: 2px;
        }
        .fmsg-bubble-close:hover { color: #ef4444; }
        /* عند الإخفاء (بعد أن شاهد الزائر الرسالة في زيارة سابقة) */
        .fmsg-wrap.hidden { display: none; }
        @media (max-width: 480px) {
            .fmsg-wrap { left: 14px; bottom: 16px; }
            .fmsg-fab { width: 54px; height: 54px; font-size: 1.35rem; }
        }

        /* --- صف الهيدر العلوي عندما لا يوجد اسم زائر (يعرض الجرس فقط أقصى اليسار) --- */
        .ktx-header-row-empty { display: flex; align-items: center; direction: rtl; margin-bottom: 14px; }

        /* --- جرس الإشعارات: زر دائري أبيض/أسود فقط، مدمج داخل شريط الترحيب أقصى اليسار --- */
        /* ملاحظة: في RTL يجب استخدام margin-right:auto (وليس margin-left) لدفع العنصر فعلياً نحو أقصى اليسار الفعلي للصفحة */
        .ktx-bell-wrap { position: relative; direction: rtl; flex: 0 0 auto; margin-right: auto; }
        .ktx-bell-btn {
            position: relative; width: 40px; height: 40px; border-radius: 50%;
            background: #ffffff; color: #111827; border: none; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.05rem; box-shadow: 0 4px 12px rgba(0,0,0,0.18);
            transition: box-shadow .25s ease;
        }
        body.dark .ktx-bell-btn {
            background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
            color: #f1f5f9;
            border: 1px solid rgba(45,212,191,0.35);
            box-shadow: 0 4px 14px rgba(0,0,0,0.35), 0 0 10px rgba(45,212,191,0.12);
        }
        .ktx-header-row-empty .ktx-bell-btn { background: #ffffff; color: #111827; box-shadow: 0 4px 12px rgba(0,0,0,0.12); }
        body.dark .ktx-header-row-empty .ktx-bell-btn {
            background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
            color: #f1f5f9;
            border: 1px solid rgba(45,212,191,0.35);
            box-shadow: 0 4px 14px rgba(0,0,0,0.35), 0 0 10px rgba(45,212,191,0.12);
        }
        .ktx-bell-btn:hover { box-shadow: 0 6px 16px rgba(0,0,0,0.22); }
        .ktx-bell-btn:active { box-shadow: 0 3px 10px rgba(0,0,0,0.16); }
        /* رمز الجرس نفسه ثابت دائماً ولا يتحرك أبداً؛ الحركة تقتصر على رقم الإشعارات فقط عند وصول إشعار جديد */
        .ktx-bell-badge {
            position: absolute; top: -4px; left: -4px;
            min-width: 19px; height: 19px; padding: 0 5px; border-radius: 50px;
            background: #ef4444; color: #fff; font-size: 0.7rem; font-weight: 800;
            display: flex; align-items: center; justify-content: center;
            border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.25);
            direction: ltr; font-family: Arial, Helvetica, sans-serif;
            font-feature-settings: "locl" 0, "tnum" 1; line-height: 1;
        }
        /* حركة رقم الإشعارات فقط: تكبير/نبض بسيط عند ظهور إشعار جديد (تعمل فقط طالما فيه إشعارات غير مقروءة) */
        .ktx-bell-badge.pulse { animation: ktxBadgePulse 0.6s ease; }
        @keyframes ktxBadgePulse {
            0%   { transform: scale(1); }
            30%  { transform: scale(1.45); }
            55%  { transform: scale(0.9); }
            75%  { transform: scale(1.15); }
            100% { transform: scale(1); }
        }
        body.dark .ktx-bell-badge { border-color: #1e293b; }

        /* ==================================================================================
           نافذة الإشعارات: فقاعة منبثقة (Popover) تخرج من الجرس نفسه وتبقى متّصلة به بذيل مثلث،
           تتموضع ديناميكياً بجانب الجرس عبر JS (بدل نافذة مركزية منفصلة عنه)
        ================================================================================== */
        .ktx-notif-panel {
            position: fixed; inset: 0; z-index: 99999; direction: rtl;
            background: transparent; pointer-events: none;
            opacity: 0; visibility: hidden;
            transition: opacity .22s ease, visibility .3s;
        }
        .ktx-notif-panel.open { opacity: 1; visibility: visible; pointer-events: auto; }
        .ktx-notif-modal {
            --tail-left: 50%;
            position: fixed; width: 268px; max-width: calc(100vw - 24px);
            filter: drop-shadow(0 24px 60px rgba(0,0,0,0.5)) drop-shadow(0 0 30px rgba(251,191,36,0.12));
            transform: scale(0.85); opacity: 0;
            transform-origin: var(--tail-left) top;
            transition: transform .3s cubic-bezier(.22,1,.36,1), opacity .26s ease;
        }
        /* الصندوق الداخلي: يحمل التدوير والقص الفعلي للمحتوى (منفصل عن الذيل حتى لا يُقصّ) */
        .ktx-notif-modal-inner {
            display: flex; flex-direction: column; overflow: hidden;
            border-radius: 24px;
            color: #e5e7eb;
            background:
                radial-gradient(circle at 15% 0%, rgba(56,189,248,0.12), transparent 45%),
                radial-gradient(circle at 100% 100%, rgba(245,158,11,0.14), transparent 45%),
                linear-gradient(160deg, #0b1120 0%, #111827 55%, #0b1120 100%);
            border: 1px solid rgba(251,191,36,0.28);
            box-shadow: 0 0 0 1px rgba(255,255,255,0.05) inset;
        }
        /* الذيل المثلث الذي يصل النافذة بالجرس بصرياً (على الصندوق الخارجي غير المقصوص فيبقى ظاهراً بالكامل) */
        .ktx-notif-modal::before {
            content: ''; position: absolute; top: -8px; left: var(--tail-left);
            width: 18px; height: 18px; margin-left: -9px;
            background: #0d1526;
            border-left: 1px solid rgba(251,191,36,0.28); border-top: 1px solid rgba(251,191,36,0.28);
            border-radius: 4px 0 0 0;
            transform: rotate(45deg);
            z-index: 1;
        }
        .ktx-notif-modal.ktx-notif-modal-up { transform-origin: var(--tail-left) bottom; }
        .ktx-notif-modal.ktx-notif-modal-up::before {
            top: auto; bottom: -8px;
            border-left: none; border-top: none;
            border-right: 1px solid rgba(251,191,36,0.28); border-bottom: 1px solid rgba(251,191,36,0.28);
            border-radius: 0 0 4px 0;
        }
        .ktx-notif-panel.open .ktx-notif-modal { transform: scale(1); opacity: 1; }
        .ktx-notif-header {
            display: flex; align-items: center; justify-content: center; position: relative;
            padding: 15px 46px 13px; flex: 0 0 auto;
            background: linear-gradient(135deg, rgba(15,23,42,0.9), rgba(15,23,42,0.55));
            backdrop-filter: blur(14px);
            border-bottom: 1px solid rgba(245,158,11,0.22);
        }
        .ktx-notif-clear {
            position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
            display: flex; align-items: center; gap: 5px;
            padding: 5px 10px; border-radius: 999px;
            background: rgba(239,68,68,0.10); border: 1px solid rgba(239,68,68,0.28);
            color: #fca5a5; font-size: 0.66rem; font-weight: 800; cursor: pointer;
            white-space: nowrap; transition: background .2s ease, opacity .2s ease;
        }
        .ktx-notif-clear:hover { background: rgba(239,68,68,0.2); }
        .ktx-notif-clear:disabled { opacity: 0.32; cursor: default; pointer-events: none; }
        .ktx-notif-clear i { font-size: 0.7rem; }
        .ktx-notif-header-title {
            display: flex; align-items: center; gap: 8px;
            font-weight: 800; font-size: 0.96rem; letter-spacing: 0.2px;
            color: #fbbf24;
            text-shadow: 0 0 18px rgba(251,191,36,0.35);
        }
        .ktx-notif-header-title i { font-size: 0.9rem; }
        .ktx-notif-close {
            position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
            width: 30px; height: 30px; border-radius: 50%;
            background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14);
            color: #e5e7eb; font-size: 0.86rem; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            transition: background .2s ease, transform .2s ease;
        }
        .ktx-notif-close:hover { background: rgba(255,255,255,0.14); transform: translateY(-50%) scale(1.06); }

        .ktx-notif-list { overflow-y: auto; padding: 9px 9px 12px; flex: 1 1 auto; display: flex; flex-direction: column; gap: 7px; }
        .ktx-notif-empty { text-align: center; opacity: 0.55; font-size: 0.85rem; padding: 40px 10px; margin: 0; }

        .ktx-notif-item {
            display: block; text-align: right; position: relative; overflow: hidden;
            flex: 0 0 auto;
            border-radius: 12px; padding: 8px 10px 8px 9px;
            background: linear-gradient(145deg, rgba(255,255,255,0.055), rgba(255,255,255,0.02));
            border: 1px solid rgba(255,255,255,0.08);
            box-shadow: 0 8px 20px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.04);
            backdrop-filter: blur(6px);
            animation: ktxNotifItemIn .38s cubic-bezier(.22,1,.36,1) both;
        }
        @keyframes ktxNotifItemIn {
            from { opacity: 0; transform: translateY(10px) scale(0.98); }
            to   { opacity: 1; transform: translateY(0) scale(1); }
        }
        .ktx-notif-item::before {
            content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 4px;
            background: currentColor; opacity: 0.85;
        }
        .ktx-notif-item.unread { border-color: rgba(251,191,36,0.35); box-shadow: 0 10px 30px rgba(0,0,0,0.4), 0 0 0 1px rgba(251,191,36,0.12) inset; }

        .ktx-notif-item-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 7px; margin-bottom: 5px; }
        .ktx-notif-item-title-wrap { display: flex; align-items: center; gap: 6px; }
        .ktx-notif-item-icon {
            width: 20px; height: 20px; min-width: 20px; border-radius: 7px;
            display: flex; align-items: center; justify-content: center;
            background: currentColor; position: relative; font-size: 0.6rem;
        }
        .ktx-notif-item-icon i { color: #0b1120; }
        .ktx-notif-item-title { font-weight: 800; font-size: 0.78rem; color: #f8fafc; line-height: 1.3; }
        .ktx-notif-item-date {
            display: inline-flex; flex-direction: column; align-items: center; gap: 0px;
            font-size: 0.55rem; font-weight: 700; opacity: 0.55; white-space: nowrap; direction: ltr;
            padding: 2px 6px; border-radius: 10px; background: rgba(255,255,255,0.06);
            border: 1px solid rgba(255,255,255,0.08); margin-top: 1px; line-height: 1.2;
        }
        .ktx-notif-item-day { font-size: 0.55rem; font-weight: 700; }
        .ktx-notif-item-time { font-size: 0.53rem; font-weight: 800; opacity: 0.85; letter-spacing: 0.2px; }
        .ktx-notif-item-msg {
            font-size: 0.72rem; color: #cbd5e1; opacity: 0.92; white-space: pre-line;
            line-height: 1.5; padding-top: 4px; border-top: 1px dashed rgba(255,255,255,0.09);
        }
        .ktx-notif-item-unread-pill {
            display: inline-flex; align-items: center; gap: 4px; font-size: 0.55rem; font-weight: 800;
            color: #0b1120; background: #fbbf24; padding: 1px 6px; border-radius: 999px;
            margin-inline-start: 6px; letter-spacing: 0.3px; box-shadow: 0 3px 8px rgba(251,191,36,0.4);
        }

        .notif-color-default { color: #94a3b8; }
        .notif-color-green   { color: #34d399; }
        .notif-color-orange  { color: #fbbf24; }
        .notif-color-purple  { color: #c084fc; }
        .notif-color-blue    { color: #60a5fa; }
        .notif-color-red     { color: #f87171; }
        .notif-color-teal    { color: #2dd4bf; }
        .notif-color-pink    { color: #f472b6; }
        .notif-color-indigo  { color: #818cf8; }
        .notif-color-lime    { color: #a3e635; }

        /* --- شريط اختيار لون الإشعار: دوائر ألوان قابلة للنقر بدل القائمة المنسدلة --- */
        /* ملاحظة: نستخدم .color-swatch-group .color-swatch (لا .color-swatch وحدها) عمداً لرفع
           خصوصية القاعدة فتتغلب على ".admin-panel button" العامة التي تفرض width:100% على كل الأزرار،
           وإلا تظهر الدوائر كأشرطة ممتدة بلون واحد بدل دوائر ألوان منفصلة. */
        .color-swatch-group {
            display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
            padding: 12px 10px; margin-bottom: 10px;
            background: #0f172a; border: 1px solid #475569; border-radius: 10px;
        }
        .color-swatch-group .color-swatch {
            width: 30px !important; height: 30px; min-width: 30px; max-width: 30px;
            padding: 0 !important; margin: 0; border-radius: 50% !important; flex: 0 0 30px;
            background: var(--swatch-color) !important; border: 2px solid rgba(255,255,255,0.15);
            cursor: pointer; position: relative; box-shadow: 0 2px 6px rgba(0,0,0,0.35);
            transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
        }
        .color-swatch-group .color-swatch:hover { transform: scale(1.12); }
        .color-swatch-group .color-swatch.active {
            border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,0.18), 0 3px 10px rgba(0,0,0,0.45);
        }
        .color-swatch-group .color-swatch.active::after {
            content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
            position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
            font-size: 0.7rem; color: #0b1120; text-shadow: 0 1px 2px rgba(255,255,255,0.5);
        }

        /* --- تحسين شكل القوائم المنسدلة العادية (مثل وضع التنبيه) داخل لوحة التحكم ونافذة التعديل --- */
        .admin-panel select, #editLinkOverlay select {
            width: 100%; padding: 11px 38px 11px 14px; border-radius: 10px;
            border: 1px solid #475569; background-color: #0f172a; color: #fff;
            margin-bottom: 10px; font-family: inherit; font-size: 0.85rem; cursor: pointer;
            appearance: none; -webkit-appearance: none; -moz-appearance: none;
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2300c6ff' stroke-width='3'><polyline points='6 9 12 15 18 9'/></svg>");
            background-repeat: no-repeat; background-position: left 12px center;
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
        }
        .admin-panel select:hover, #editLinkOverlay select:hover { border-color: #00c6ff; }
        .admin-panel select:focus, #editLinkOverlay select:focus {
            outline: none; border-color: #00c6ff; box-shadow: 0 0 0 3px rgba(0,198,255,0.18);
        }
        .admin-panel select option, #editLinkOverlay select option { background: #0f172a; color: #fff; }

        body.ktx-notif-lock { overflow: hidden; }
        body.ktx-update-lock { overflow: hidden; }
        @media (max-width: 480px) {
            .ktx-bell-btn { width: 38px; height: 38px; font-size: 1rem; }
            .ktx-notif-modal-inner { border-radius: 20px; }
            .ktx-notif-header { padding-left: 40px; padding-right: 40px; }
            .ktx-notif-clear { font-size: 0.66rem; padding: 6px 9px; }
        }