/* ============================================
           CSS متكامل ومحسن — هوية بصرية جديدة
        ============================================ */
        * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Cairo', 'Cairo', sans-serif; }
        
        :root {
            --gold: #149c4d;
            --gold-light: #A78BFA;
            --gold-gradient: linear-gradient(135deg, #149c4d 0%, #e0142a 100%);
            --primary-color: #149c4d;
            --secondary-color: #e0142a;
            --accent: #e0142a;
            --accent-light: #5EEAD4;
            --accent-gradient: linear-gradient(135deg, #e0142a, #149c4d);
            --mesh-gradient: radial-gradient(at 15% 0%, rgba(108,93,211,0.14) 0px, transparent 50%),
                             radial-gradient(at 85% 15%, rgba(0,194,168,0.12) 0px, transparent 50%),
                             radial-gradient(at 50% 100%, rgba(15,11,30,0.05) 0px, transparent 50%);
            --bg-primary: #f6f5fb;
            --bg-secondary: #ffffff;
            --bg-card: #ffffff;
            --bg-input: #f2f1f9;
            --bg-hover: #ece9f8;
            --text-primary: #1a1730;
            --text-secondary: #35314f;
            --text-muted: #6b6785;
            --text-light: #928fa8;
            --success: #10b981;
            --danger: #ef4444;
            --warning: #f59e0b;
            --info: #3b82f6;
            --border-color: #e6e3f2;
            --border-gold: rgba(108,93,211,0.3);
            --shadow-sm: 0 2px 8px rgba(26,23,48,0.06);
            --shadow: 0 8px 32px rgba(26,23,48,0.09);
            --shadow-lg: 0 16px 48px rgba(26,23,48,0.14);
            --shadow-gold: 0 8px 32px rgba(108,93,211,0.20);
            --shadow-accent: 0 8px 28px rgba(0,194,168,0.20);
            --glass-bg: rgba(255,255,255,0.55);
            --glass-border: rgba(255,255,255,0.45);
            --radius: 18px;
            --radius-sm: 14px;
            --radius-lg: 26px;
            --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            --header-bg: #0b0b0b;
            --footer-bg: #050505;
            --sidebar-bg: #ffffff;
            --sidebar-text: var(--text-primary);
            --card-border: var(--border-color);
            --btn-bg: var(--gold-gradient);
            --btn-text: #fff;
            --bottom-nav-bg: #faf7f0;
            --bottom-nav-icon: #149c4d;
            --modal-overlay: rgba(15,11,30,0.75);
        }
        
        [data-theme="dark"] {
            --bg-primary: #0a0e17;
            --bg-secondary: #111827;
            --bg-card: #1a2332;
            --bg-input: #1e2a3a;
            --bg-hover: #243044;
            --text-primary: #f1f5f9;
            --text-secondary: #cbd5e1;
            --text-muted: #94a3b8;
            --text-light: #64748b;
            --border-color: #1e2a3a;
            --border-gold: rgba(20,156,77,0.25);
            --shadow-sm: 0 2px 8px rgba(0,0,0,0.25);
            --shadow: 0 8px 32px rgba(0,0,0,0.3);
            --shadow-lg: 0 16px 48px rgba(0,0,0,0.45);
            --glass-bg: rgba(20,30,25,0.55);
            --glass-border: rgba(255,255,255,0.08);
            --mesh-gradient: radial-gradient(at 15% 0%, rgba(20,156,77,0.18) 0px, transparent 50%),
                             radial-gradient(at 85% 15%, rgba(224,20,42,0.16) 0px, transparent 50%),
                             radial-gradient(at 50% 100%, rgba(250,247,240,0.05) 0px, transparent 50%);
            --header-bg: #0a0e17;
            --footer-bg: #060a12;
            --sidebar-bg: #111827;
            --modal-overlay: rgba(0,0,0,0.85);
        }

        /* ===== 🆕 تخصيصات المشرف الإضافية (سايدبار/بطاقات/أزرار/نصوص) — تُطبَّق بالوضعين الفاتح والغامق إذا فُعِّلت، وتبقى فاضية = تلقائي حسب الثيم ===== */
        :root, [data-theme="dark"] {
                                                                                                        }

        body {
            background: var(--mesh-gradient), var(--bg-primary);
            background-attachment: fixed;
            color: var(--text-primary);
            min-height: 100vh;
            transition: var(--transition);
            font-size: 16px;
            line-height: 1.6;
            overflow-x: hidden;
        }
        
        a { text-decoration: none; color: var(--text-primary); transition: var(--transition); }
        a:hover { color: var(--gold); }

        /* ===== ⌨️ حلقة تركيز واضحة عند التنقل بلوحة المفاتيح (وصولية) ===== */
        a:focus-visible, button:focus-visible, .btn-gold:focus-visible, .btn-gold-full:focus-visible {
            outline: 2px solid var(--gold); outline-offset: 2px; border-radius: var(--radius-sm);
        }

        /* ===== 🎨 هوية بصرية موحّدة لعناوين الأقسام بالواجهة (بدل الأنماط المتفرقة inline) ===== */
        .section-title {
            display: flex; align-items: center; gap: 9px;
            font-size: 1.02rem; font-weight: 800; color: var(--text-primary);
            letter-spacing: 0.2px; margin: 0;
        }
        .section-title::before {
            content: ''; width: 4px; height: 18px; border-radius: 3px;
            background: var(--gold-gradient); flex: none;
        }
        .section-title i { color: var(--gold); font-size: 0.95em; }
        .section-title-sub { color: var(--text-muted); font-size: 0.74rem; font-weight: 500; margin: 3px 0 0 13px; }
        .section-link {
            color: var(--text-muted); font-size: 0.78rem; font-weight: 600;
            display: inline-flex; align-items: center; gap: 5px; transition: var(--transition);
        }
        .section-link:hover { color: var(--gold); gap: 8px; }
        
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: var(--bg-primary); }
        ::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 3px; }
        ::-webkit-scrollbar-thumb:hover { background: var(--gold-light); }

        @keyframes fadeInUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
        @keyframes shimmerMove { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
        
        /* ===== شاشة البداية (نسخة محسّنة بتأثيرات ثلاثية الأبعاد) ===== */
        #splashScreen {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: linear-gradient(135deg, var(--secondary-color, #0a0a0a) 0%, #1a1a1a 40%, var(--primary-color, #FFC300) 150%);
            background-size: 300% 300%; animation: splashGradient 8s ease infinite;
            z-index: 999999;
            display: flex; justify-content: center; align-items: center;
            flex-direction: column; transition: opacity 0.45s ease, visibility 0.45s ease, background 0.3s ease, backdrop-filter 0.3s ease;
            perspective: 1200px; overflow: hidden;
        }
        #splashScreen::before {
            /* شبكة نقاط متلألئة بعمق خفيف لإحساس أعمق بالفضاء خلف الشعار */
            content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.35;
            background-image: radial-gradient(rgba(255,255,255,0.35) 1px, transparent 1px);
            background-size: 34px 34px; transform: translateZ(-200px) scale(1.3);
            animation: splashDrift 12s linear infinite;
        }
        /* ===== ✨ نجوم ملوّنة فوق دائرة التحميل في شاشة البداية (v37: أكبر وأوضح) ===== */
        #splashScreen .splash-logo-wrap { overflow: visible; }
        #splashScreen .splash-stars {
            position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%);
            width: 230px; height: 84px; pointer-events: none; z-index: 5; direction: ltr;
        }
        #splashScreen .splash-stars i {
            position: absolute; left: var(--x); top: var(--y); font-style: normal; line-height: 1;
            font-size: calc(var(--s) * 2); color: var(--c); opacity: .5;
            text-shadow: 0 0 6px var(--c), 0 0 14px var(--c);
            animation: splashStarTwinkle 1.6s ease-in-out infinite; animation-delay: var(--d);
        }
        @keyframes splashStarTwinkle {
            0%, 100% { opacity: .35; transform: scale(.7) rotate(0deg); }
            50% { opacity: 1; transform: scale(1.25) rotate(20deg); }
        }
        @media (prefers-reduced-motion: reduce) { #splashScreen .splash-stars i { animation: none; opacity: .9; } }
        #splashScreen.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
        /* ===== 🎛️ يتحكم بها المدير من الإعدادات: تعطيل الخلفية المتحركة بالكامل (لون ثابت فقط) ===== */
        #splashScreen.splash-flat { background: var(--header-bg, #0a0a0a) !important; animation: none !important; }
        #splashScreen.splash-flat::before { display: none; }
        /* ===== 🖼️ صورة خلفية مخصّصة يرفعها المدير بدل التدرج المتحرك الافتراضي ===== */
        #splashScreen.has-custom-bg { animation: none !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; }
        #splashScreen.has-custom-bg::before { opacity: 0.15; }
        /* عند التنقل الداخلي (بعد أول دخول للمتجر): بدون أي خلفية إطلاقاً - فقط مؤشر تحميل ثلاثي الأبعاد صغير عائم فوق الصفحة الحالية */
        #splashScreen.no-bg {
            background: transparent !important; animation: none !important;
            backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
            pointer-events: none;
        }
        #splashScreen.no-bg::before { display: none; }
        #splashScreen.no-bg .splash-3d-stage { transform: scale(0.42) translateY(-10px); }
        #splashScreen.no-bg .splash-stars { display: none; }
        #splashScreen.no-bg .splash-title,
        #splashScreen.no-bg .splash-sub,
        #splashScreen.no-bg .splash-shadow { display: none; }
        #splashScreen.no-bg .loader { margin-top: 8px; }

        #splashScreen .splash-3d-stage {
            display: flex; flex-direction: column; align-items: center;
            transform-style: preserve-3d; transition: transform 0.4s ease;
        }
        #splashScreen .splash-logo-wrap {
            position: relative; display: flex; align-items: center; justify-content: center;
            width: 150px; height: 150px; transform-style: preserve-3d;
            animation: float3d 3.4s ease-in-out infinite;
        }
        #splashScreen .splash-ring {
            position: absolute; border-radius: 50%; border: 1px solid rgba(255,195,0,0.45);
            transform-style: preserve-3d;
        }
        #splashScreen .splash-ring-1 { width: 150px; height: 150px; animation: ringSpin1 6s linear infinite; border-color: rgba(255,255,255,0.25); }
        #splashScreen .splash-ring-2 { width: 178px; height: 178px; animation: ringSpin2 9s linear infinite; }
        #splashScreen .splash-logo {
            position: relative; z-index: 2;
            width: 128px; height: auto; padding: 14px; border-radius: 28px;
            background: linear-gradient(145deg, rgba(255,255,255,0.2), rgba(255,255,255,0.06));
            backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.32);
            box-shadow: 0 20px 45px rgba(0,0,0,0.5), 0 2px 0 rgba(255,255,255,0.18) inset, 0 -6px 14px rgba(0,0,0,0.28) inset, 0 0 60px rgba(255,195,0,0.4);
            transform-style: preserve-3d;
        }
        #splashScreen .splash-shadow {
            width: 90px; height: 18px; margin-top: 8px; border-radius: 50%;
            background: radial-gradient(ellipse at center, rgba(0,0,0,0.55) 0%, transparent 72%);
            animation: shadowPulse 3.4s ease-in-out infinite;
            filter: blur(2px);
        }
        #splashScreen .splash-title { color: #fff; font-size: 2rem; font-weight: 900; margin-top: 22px; letter-spacing: 1px; text-shadow: 0 6px 18px rgba(0,0,0,0.45), 0 1px 0 rgba(255,255,255,0.15); }
        #splashScreen .splash-sub { color: rgba(255,255,255,0.8); font-size: 1rem; }
        #splashScreen .loader {
            width: 56px; height: 56px; border-radius: 50%; margin-top: 22px;
            background: conic-gradient(from 0deg, rgba(255,195,0,0), var(--primary-color,#FFC300) 340deg, rgba(255,195,0,0));
            -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px));
            animation: spinLoader 1s linear infinite;
            filter: drop-shadow(0 6px 10px rgba(0,0,0,0.4));
        }
        @keyframes float3d {
            0%, 100% { transform: translateY(0) translateZ(0) rotateY(0deg) rotateX(0deg); }
            25%      { transform: translateY(-10px) translateZ(24px) rotateY(12deg) rotateX(4deg); }
            50%      { transform: translateY(-16px) translateZ(34px) rotateY(0deg) rotateX(0deg); }
            75%      { transform: translateY(-10px) translateZ(24px) rotateY(-12deg) rotateX(-4deg); }
        }
        @keyframes shadowPulse { 0%, 100% { transform: scale(1); opacity: 0.55; } 50% { transform: scale(0.65); opacity: 0.25; } }
        @keyframes ringSpin1 { 0% { transform: translateZ(-20px) rotateX(70deg) rotate(0deg); } 100% { transform: translateZ(-20px) rotateX(70deg) rotate(360deg); } }
        @keyframes ringSpin2 { 0% { transform: translateZ(-40px) rotateX(70deg) rotate(360deg); } 100% { transform: translateZ(-40px) rotateX(70deg) rotate(0deg); } }
        @keyframes spinLoader { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
        @keyframes splashGradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
        @keyframes splashDrift { 0% { background-position: 0 0; } 100% { background-position: 340px 340px; } }
        
        /* ===== فلاش ماسج ===== */
        .flash-message {
            position: fixed; top: 80px; left: 50%; transform: translateX(-50%);
            z-index: 9999; padding: 14px 28px; border-radius: var(--radius);
            font-weight: 600; box-shadow: 0 10px 40px rgba(0,0,0,0.15);
            max-width: 92%; text-align: center; animation: flashIn 0.5s ease forwards;
            display: flex; align-items: center; gap: 14px;
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255,255,255,0.1);
        }
        @keyframes flashIn {
            0% { opacity: 0; transform: translateX(-50%) translateY(-60px) scale(0.9); }
            100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
        }
        .flash-success { background: rgba(16,185,129,0.15); color: var(--success); border-color: rgba(16,185,129,0.25); }
        .flash-danger { background: rgba(239,68,68,0.15); color: var(--danger); border-color: rgba(239,68,68,0.25); }
        .flash-info { background: rgba(59,130,246,0.15); color: var(--info); border-color: rgba(59,130,246,0.25); }
        .flash-message .close { cursor: pointer; opacity: 0.6; transition: var(--transition); font-size: 1.2rem; }
        .flash-message .close:hover { opacity: 1; transform: rotate(90deg); }
        
        /* ===== هيدر ===== */
        .main-header {
            padding: 10px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid var(--border-color);
            background: var(--header-bg);
            position: sticky;
            top: 0;
            z-index: 1000;
            backdrop-filter: blur(20px);
            box-shadow: 0 2px 20px rgba(0,0,0,0.1);
        }
        .main-header::after {
            content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
            background: var(--gold-gradient); background-size: 200% 100%;
            animation: shimmerMove 6s linear infinite; opacity: 0.7;
        }
        .logo-container img { max-height: 60px; width: auto; transition: transform .25s ease; }
        .logo-container img.logo-animated { animation: logoPulse 2.4s ease-in-out infinite; }
        @keyframes logoPulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.08); }
        }
        .header-icons { display: flex; align-items: center; gap: 10px; }
        .header-icons button {
            background: none; border: none; font-size: 1.2rem; color: var(--text-secondary);
            cursor: pointer; padding: 8px 10px; border-radius: var(--radius-sm);
            transition: var(--transition); position: relative;
        }
        .header-icons button:hover { background: rgba(255,255,255,0.08); color: var(--gold); }
        .header-icons .badge-notif {
            position: absolute; top: 0; right: 0; background: var(--danger);
            color: #fff; font-size: 0.55rem; padding: 2px 6px; border-radius: 50%;
            min-width: 18px; text-align: center;
        }
        .header-balance-btn {
            background: rgba(16,185,129,0.12); padding: 4px 16px; border-radius: 20px;
            border: 1px solid rgba(16,185,129,0.25); color: var(--success);
            font-weight: 700; font-size: 0.75rem; cursor: pointer; transition: var(--transition);
            text-decoration: none; display: flex; align-items: center; gap: 6px;
        }
        .header-balance-btn:hover { background: rgba(16,185,129,0.22); transform: translateY(-1px) scale(1.03); box-shadow: 0 6px 16px -6px rgba(16,185,129,0.5); }
        .header-admin-btn {
            color: var(--gold); font-weight: 700; font-size: 0.8rem; text-decoration: none;
            background: rgba(255,195,0,0.1); padding: 4px 14px; border-radius: 20px;
            border: 1px solid var(--border-gold); transition: var(--transition);
            display: flex; align-items: center; gap: 6px;
        }
        .header-admin-btn:hover { background: rgba(255,195,0,0.2); transform: translateY(-1px) scale(1.03); box-shadow: 0 6px 16px -6px rgba(255,195,0,0.5); }
        
        /* ===== سايدبار ===== */
        #overlay {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0,0,0,0.5); z-index: 9999; display: none;
            backdrop-filter: blur(4px); transition: var(--transition);
        }
        .side-nav {
            position: fixed; top: 0; right: -400px; width: 380px; height: 100vh;
            background: var(--sidebar-bg); color: var(--sidebar-text); border-left: 2px solid var(--border-gold);
            transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 10000; padding: 20px 20px 100px; overflow-y: auto;
            box-shadow: -10px 0 50px rgba(0,0,0,0.2);
        }
        .side-nav.open { right: 0; }
        .side-nav .close-btn {
            text-align: left; font-size: 1.4rem; color: var(--text-muted);
            cursor: pointer; margin-bottom: 16px; transition: var(--transition);
            background: none; border: none; width: 100%;
        }
        .side-nav .close-btn:hover { color: var(--danger); transform: rotate(90deg); }
        /* v63: مبدّل اللغة أعلى القائمة الجانبية */
        .side-nav .lang-switch {
            position: absolute; top: 14px; right: 16px; display: inline-flex; align-items: center; gap: 2px; direction: ltr;
            padding: 3px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid var(--border-color);
            -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); z-index: 3;
        }
        .side-nav .lang-switch > i { font-size: .8rem; color: var(--text-muted); padding: 0 6px 0 8px; }
        .side-nav .lang-switch a {
            text-decoration: none; font-size: .72rem; font-weight: 800; letter-spacing: .3px; padding: 5px 11px; border-radius: 999px;
            color: var(--text-muted); transition: background .25s ease, color .25s ease, transform .25s ease;
        }
        .side-nav .lang-switch a:hover { color: var(--text-primary); }
        .side-nav .lang-switch a.on { background: var(--gl-a, var(--gold)); color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.25); }
        html[dir="ltr"] .side-nav .brand-section, html[dir="ltr"] .side-nav { text-align: left; }
        html[dir="ltr"] .side-nav .brand-section { text-align: center; }
        .side-nav .brand-section { text-align: center; padding: 10px 0 15px; border-bottom: 1px solid var(--border-color); margin-bottom: 15px; }
        .side-nav .brand-section .brand-logo { font-size: 1.5rem; font-weight: 900; background: var(--gold-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
        .side-nav .brand-section .brand-sub { font-size: 0.7rem; color: var(--text-muted); }
        .side-nav .user-profile { text-align: center; padding: 15px 0; }
        .side-nav .user-profile .avatar {
            width: 60px; height: 60px; border-radius: 50%;
            background: var(--gold-gradient); display: flex; align-items: center;
            justify-content: center; margin: 0 auto; font-size: 1.5rem;
            color: #fff; font-weight: 700; border: 3px solid var(--gold);
        }
        .side-nav .user-profile h3 { color: var(--gold); margin-top: 8px; font-size: 1rem; }
        .side-nav .user-profile .balance { color: var(--success); font-size: 1rem; font-weight: 700; }

        /* ===== ستايل بروفايل جديد (مطابق للصورة المرجعية) ===== */
        .profile-header-v2 { text-align: center; padding: 18px 0 14px; }
        .profile-header-v2 .avatar-lg {
            width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 10px;
            background: var(--gold-gradient); display: flex; align-items: center; justify-content: center;
            font-size: 2.2rem; color: #fff; font-weight: 700; box-shadow: 0 4px 16px rgba(255,195,0,0.35);
        }
        .profile-header-v2 .name-row { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
        .profile-header-v2 .name-row h3 { color: var(--text-primary); font-size: 1.05rem; margin: 0; }
        .profile-header-v2 .id-badge {
            font-size: 0.65rem; font-weight: 700; color: #0a0a0a; background: var(--gold-gradient);
            padding: 2px 9px; border-radius: 20px; cursor: pointer; user-select: none;
            display: inline-flex; align-items: center; gap: 5px; transition: var(--transition);
            font-family: monospace; letter-spacing: 0.5px;
        }
        .profile-header-v2 .id-badge:hover { filter: brightness(1.08); transform: translateY(-1px); }
        .profile-header-v2 .id-badge .copy-hint { font-size: 0.6rem; opacity: 0.7; }
        .profile-header-v2 .id-badge.copied { background: var(--success); color: #fff; }
        .profile-header-v2 .id-badge.copied .copy-hint::before { content: "\f00c"; }
        .profile-header-v2 .balance-lg { font-size: 1.6rem; font-weight: 800; color: var(--gold); margin-top: 6px; }
        /* ===== 👑 شارة مستوى VIP ===== */
        .vip-badge {
            display: inline-flex; align-items: center; gap: 5px;
            padding: 4px 12px; border-radius: 20px; font-size: 0.72rem; font-weight: 800;
            color: #1a1a1a; white-space: nowrap;
            background: linear-gradient(135deg, color-mix(in srgb, var(--vip-color) 85%, white), var(--vip-color));
            box-shadow: 0 0 0 1px color-mix(in srgb, var(--vip-color) 60%, transparent), 0 2px 10px color-mix(in srgb, var(--vip-color) 45%, transparent);
            animation: vipGlow 2.6s ease-in-out infinite;
        }
        .vip-badge i { font-size: 0.78rem; }
        .vip-badge-sm { padding: 2px 8px; font-size: 0.6rem; }
        @keyframes vipGlow {
            0%, 100% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--vip-color) 60%, transparent), 0 2px 10px color-mix(in srgb, var(--vip-color) 45%, transparent); }
            50% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--vip-color) 80%, transparent), 0 2px 18px color-mix(in srgb, var(--vip-color) 75%, transparent); }
        }
        .price-vip { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
        .price-vip .price-old { font-size: 0.8rem; color: var(--text-muted); text-decoration: line-through; font-weight: 600; }
        .price-vip .price-final { color: var(--gold); font-weight: 800; }
        .price-vip .price-vip-tag {
            font-size: 0.62rem; font-weight: 800; color: #1a1a1a; padding: 2px 7px; border-radius: 10px;
            background: linear-gradient(135deg,#fde68a,#FFC300);
        }
        /* ===== 🆕 شارة العرض المحدود (Flash Sale) ===== */
        .price-vip .price-flash-tag {
            font-size: 0.62rem; font-weight: 800; color: #fff; padding: 2px 8px; border-radius: 10px;
            background: linear-gradient(135deg,#ff5555,#ff8800); display: inline-flex; align-items: center; gap: 4px;
            animation: flashPulse 1.4s ease-in-out infinite;
        }
        @keyframes flashPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.75; } }
        .flash-countdown { font-variant-numeric: tabular-nums; }
        /* ===== 🆕 شارة خصم دائم بنسبة مئوية على منتج معيّن (بدون وقت انتهاء، بعكس العرض المحدود) ===== */
        .price-vip .price-discount-tag {
            font-size: 0.62rem; font-weight: 800; color: #fff; padding: 2px 8px; border-radius: 10px;
            background: linear-gradient(135deg,#22c55e,#16a34a); display: inline-flex; align-items: center; gap: 4px;
        }
        .product-item .featured-badge.discount-badge {
            background: linear-gradient(135deg,#22c55e,#16a34a); box-shadow: 0 2px 8px rgba(34,197,94,0.35); animation: none;
        }
        .vip-level-swatch { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; font-size: 0.65rem; color: #1a1a1a; }
        .profile-header-v2 .quick-actions {
            display: flex; justify-content: center; gap: 22px; margin: 14px 0 4px;
        }
        .profile-header-v2 .quick-actions a {
            width: 42px; height: 42px; border-radius: 50%; background: var(--bg-input);
            display: flex; align-items: center; justify-content: center; color: var(--text-secondary);
            font-size: 1.05rem; text-decoration: none; border: 1px solid var(--border-color); transition: var(--transition);
        }
        .profile-header-v2 .quick-actions a:hover { color: var(--gold); border-color: var(--gold); transform: translateY(-2px); }
        .side-nav a {
            display: flex; align-items: center; gap: 12px; padding: 10px 14px;
            border-radius: var(--radius-sm); color: var(--text-secondary);
            text-decoration: none; transition: var(--transition);
        }
        .side-nav a:hover { background: var(--bg-hover); color: var(--gold); }
        .side-nav a i { width: 20px; text-align: center; font-size: 1rem; }
        .side-nav .nav-section { padding: 8px 14px 4px; font-size: 0.65rem; color: var(--text-light); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
        .side-nav .divider { border: none; height: 1px; background: var(--border-color); margin: 8px 0; }
        /* ===== 💱 قائمة اختيار عملة العرض التقريبي بالسايدبار ===== */
        .side-nav-currency { margin: 2px 14px 0; border: 1px solid var(--border-color); border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-hover); }
        .side-nav-currency-toggle {
            width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
            padding: 11px 12px; background: transparent; border: none; cursor: pointer;
            color: var(--text-primary); font-family: inherit; font-size: 0.82rem; font-weight: 700;
            text-align: right; transition: var(--transition);
        }
        .side-nav-currency-toggle:hover { color: var(--gold); }
        .side-nav-currency-toggle > span:first-child { flex: 1; }
        .side-nav-currency-badge {
            font-size: 0.68rem; font-weight: 700; color: #1a1a2e; background: var(--gold-gradient, var(--gold));
            padding: 3px 9px; border-radius: 20px; white-space: nowrap;
        }
        .side-nav-currency-arrow { transition: transform 0.25s ease; color: var(--text-muted); font-size: 0.75rem; }
        .side-nav-currency.open .side-nav-currency-arrow { transform: rotate(180deg); color: var(--gold); }
        .side-nav-currency-options { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; background: var(--bg-card); }
        .side-nav-currency.open .side-nav-currency-options { max-height: 320px; overflow-y: auto; }
        .side-nav-currency-opt {
            display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; margin: 0;
            font-size: 0.8rem; color: var(--text-secondary); cursor: pointer; text-decoration: none;
            border-top: 1px solid var(--border-color); transition: var(--transition);
        }
        .side-nav-currency-opt:hover { background: var(--bg-hover); color: var(--gold); }
        .side-nav-currency-opt-name { display: flex; flex-direction: column; gap: 2px; }
        .side-nav-currency-opt-rate { font-size: 0.68rem; color: var(--text-light); font-weight: 500; }
        .side-nav-currency-opt.checked-opt { color: var(--gold); font-weight: 700; background: var(--bg-hover); }
        .side-nav-currency-opt.checked-opt .side-nav-currency-opt-rate { color: var(--gold); opacity: 0.8; }
        .side-nav-currency-opt i.fa-check { color: var(--gold); font-size: 0.75rem; flex-shrink: 0; }
        
        /* ===== المحتوى ===== */
        .site-container { max-width: 1200px; margin: 0 auto; padding: 0 16px 50px; min-height: calc(100vh - 120px); }
        
        /* ===== أزرار ===== */
        .btn-gold {
            background: var(--btn-bg); color: var(--btn-text); border: none;
            padding: 10px 24px; border-radius: var(--radius-sm); font-weight: 700;
            cursor: pointer; transition: var(--transition); font-size: 0.9rem;
            position: relative; overflow: hidden;
        }
        .btn-gold::before {
            content: ''; position: absolute; top: 0; left: -75%; width: 50%; height: 100%;
            background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
            transform: skewX(-20deg); transition: left 0.6s ease;
        }
        .btn-gold:hover::before { left: 125%; }
        .btn-gold:hover { transform: translateY(-2px); box-shadow: 0 10px 26px -6px rgba(255,195,0,0.45); }
        .btn-gold:active { transform: translateY(0) scale(0.98); }
        .btn-gold-full { width: 100%; padding: 12px; border: none; border-radius: var(--radius-sm); background: var(--btn-bg); color: var(--btn-text); font-weight: 700; cursor: pointer; transition: var(--transition); font-size: 0.95rem; position: relative; overflow: hidden; box-shadow: 0 6px 20px -6px rgba(255,195,0,0.4); }
        /* ===== زر شراء أخضر بشكل بيضاوي كامل (Pill) — يُستخدم بنافذة الشراء السريع وزر الشراء بصفحة المنتج ===== */
        .btn-buy-pill { background: var(--success); border-radius: 999px; box-shadow: 0 6px 20px -6px rgba(16,185,129,0.4); }
        .btn-buy-pill:disabled { opacity: 0.65; cursor: not-allowed; }
        .btn-gold-full::before {
            content: ''; position: absolute; top: 0; left: -75%; width: 50%; height: 100%;
            background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
            transform: skewX(-20deg); transition: left 0.6s ease;
        }
        .btn-gold-full:hover::before { left: 125%; }
        .btn-gold-full:hover { transform: scale(1.02) translateY(-1px); box-shadow: 0 12px 28px -6px rgba(255,195,0,0.5); }
        .btn-gold-full:active { transform: scale(0.98) translateY(0); }
        .btn-danger { background: var(--danger); color: #fff; border: none; padding: 6px 14px; border-radius: var(--radius-sm); font-weight: 700; cursor: pointer; transition: var(--transition); font-size: 0.75rem; }
        .btn-danger:hover { transform: scale(1.05); }
        .btn-success { background: var(--success); color: #fff; border: none; padding: 6px 14px; border-radius: var(--radius-sm); font-weight: 700; cursor: pointer; transition: var(--transition); font-size: 0.75rem; }
        .btn-success:hover { transform: scale(1.05); }
        .btn-sm { padding: 4px 12px; font-size: 0.65rem; }
        
        /* ===== بطاقات ===== */
        .card {
            background: var(--bg-card); border-radius: var(--radius);
            border: 1px solid var(--border-color); padding: 20px;
            transition: var(--transition); box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.03);
            animation: fadeInUp 0.4s ease both;
            position: relative; isolation: isolate; overflow: hidden;
        }
        .card::after {
            content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
            background: var(--gold-gradient); opacity: 0; transition: opacity 0.35s ease;
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 1;
        }
        .card:hover { border-color: transparent; box-shadow: var(--shadow-lg), 0 0 32px -8px rgba(255,195,0,0.35); transform: translateY(-4px) scale(1.01); }
        .card:hover::after { opacity: 1; }
        .card-gold { border-color: var(--border-gold); }
        
        /* ===== نموذج — تصميم مُحسَّن يُطبَّق تلقائياً على كل الحقول بكل صفحات الموقع ===== */
        .form-control {
            width: 100%; padding: 13px 16px; border-radius: var(--radius-sm);
            border: 1.5px solid var(--border-color); background: var(--bg-input);
            color: var(--text-primary); font-size: 1rem; font-weight: 500;
            transition: var(--transition); box-shadow: inset 0 1px 2px rgba(0,0,0,0.04);
        }
        .form-control::placeholder { color: var(--text-light); font-weight: 400; }
        .form-control:hover { border-color: var(--border-gold); }
        .form-control:focus {
            outline: none; border-color: var(--gold); background: var(--bg-card);
            box-shadow: 0 0 0 4px rgba(255,195,0,0.14), inset 0 1px 2px rgba(0,0,0,0.04);
        }
        .form-control:disabled { opacity: 0.55; cursor: not-allowed; }
        textarea.form-control { resize: vertical; min-height: 90px; line-height: 1.6; }
        select.form-control {
            appearance: none; -webkit-appearance: none; cursor: pointer;
            background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23999999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
            background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px;
        }
        input[type="checkbox"], input[type="radio"] { accent-color: var(--gold); width: 18px; height: 18px; cursor: pointer; vertical-align: middle; }
        .form-group { margin-bottom: 14px; }
        .form-group > label, label.field-label {
            display: block; font-size: 0.8rem; font-weight: 700; color: var(--text-muted);
            margin-bottom: 6px; letter-spacing: 0.2px;
        }

        /* ===== 🔢 عناصر ضبط الكمية (أزرار +/- وحقل الرقم) — نفس لغة تصميم الحقول أعلاه، يمنع قصّ الأرقام الطويلة ===== */
        .qty-group { display: flex; align-items: stretch; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
        .qty-btn {
            flex: none; width: 46px; min-height: 46px; border: none;
            background: var(--bg-input); color: var(--text-primary); border-radius: 999px;
            font-size: 1.35rem; font-weight: 800; line-height: 1;
            cursor: pointer; transition: var(--transition);
        }
        .qty-btn:hover { background: rgba(255,195,0,0.16); color: var(--gold); }
        .qty-btn:active { transform: scale(0.92); }
        .qty-field {
            flex: 1 1 140px; min-width: 140px; min-height: 46px; box-sizing: border-box;
            text-align: center; font-weight: 800; font-size: 1.05rem; letter-spacing: 0.3px;
            padding: 10px 12px; border-radius: 999px; border: none;
            background: var(--bg-input); color: var(--text-primary); transition: var(--transition);
        }
        .qty-field:hover { background: var(--bg-card); }
        .qty-field:focus { outline: none; background: var(--bg-card); box-shadow: 0 0 0 4px rgba(255,195,0,0.14); }
        @media (max-width: 380px) { .qty-field { font-size: 0.95rem; min-width: 118px; } .qty-btn { width: 42px; } }

        /* ===== 📤 منطقة سحب وإفلات لرفع الصور (تُنشأ تلقائياً فوق أي input[type=file] بالموقع بالكامل) ===== */
        .dz-wrapper { position: relative; margin-bottom: 4px; }
        .dz-hidden-input { position: absolute; width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; z-index: -1; }
        .dz-zone {
            border: 2px dashed var(--border-gold); border-radius: var(--radius-sm);
            background: var(--bg-input); padding: 16px; text-align: center; cursor: pointer;
            transition: var(--transition); display: flex; flex-direction: column; align-items: center; gap: 6px;
        }
        .dz-zone:hover, .dz-zone.dz-drag { border-color: var(--gold); background: rgba(255,195,0,0.06); }
        .dz-zone .dz-icon { font-size: 1.5rem; color: var(--gold); }
        .dz-zone .dz-text { font-size: 0.75rem; color: var(--text-muted); }
        .dz-zone .dz-preview { display: none; align-items: center; gap: 10px; width: 100%; }
        .dz-zone .dz-preview-img { display: none; width: 52px; height: 52px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border-gold); }
        .dz-zone .dz-filename { font-size: 0.72rem; color: var(--text-secondary); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
        .dz-zone .dz-remove { background: var(--danger); color: #fff; border: none; border-radius: 50%; width: 22px; height: 22px; cursor: pointer; flex-shrink: 0; }
        .form-group label { display: block; color: var(--text-muted); font-size: 0.8rem; margin-bottom: 4px; font-weight: 500; }
        
        /* ===== منتجات ===== */
        .products-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 20px; }
        .product-item {
            background: var(--bg-card); border-radius: var(--radius);
            overflow: hidden; border: 1px solid var(--card-border);
            transition: var(--transition); cursor: pointer; position: relative;
            box-shadow: var(--shadow-sm);
        }
        .product-item::after {
            content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
            background: var(--gold-gradient); opacity: 0; transition: opacity 0.35s ease;
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
        }
        .product-item:hover { transform: translateY(-7px); border-color: transparent; box-shadow: 0 18px 40px rgba(255,195,0,0.22), var(--shadow-lg); }
        .product-item:hover::after { opacity: 1; }
        .product-item .product-image { width: 100%; aspect-ratio: 4 / 3; height: auto; background: var(--bg-input); display: flex; align-items: center; justify-content: center; font-size: 2.3rem; color: var(--text-muted); overflow: hidden; position: relative; }
        .product-item .product-image::after {
            content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.28) 100%);
            opacity: 0; transition: opacity 0.35s ease;
        }
        .product-item:hover .product-image::after { opacity: 1; }
        .product-item .product-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
        .product-item:hover .product-image img { transform: scale(1.12); }
        .product-item .product-info { padding: 11px 14px 15px; }
        .product-item .product-info h4 {
            font-size: 0.82rem; font-weight: 700; color: var(--text-primary); line-height: 1.4;
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.3em;
        }
        .product-item .product-info .price {
            font-size: 0.98rem; font-weight: 800; margin-top: 7px; display: inline-flex; align-items: baseline; gap: 3px;
            color: var(--success); letter-spacing: 0.1px;
        }
        .product-item .product-info .unit { font-size: 0.62rem; color: var(--text-muted); margin-top: 2px; }
        .product-item .featured-badge {
            position: absolute; top: 8px; right: 8px;
            background: var(--gold-gradient); color: #fff;
            padding: 3px 12px; border-radius: 20px; font-size: 0.56rem;
            font-weight: 700; letter-spacing: 0.2px; box-shadow: 0 2px 8px rgba(255,195,0,0.35);
            animation: badgePulse 2.4s ease-in-out infinite;
        }
        @keyframes badgePulse {
            0%, 100% { box-shadow: 0 2px 8px rgba(255,195,0,0.3); }
            50% { box-shadow: 0 2px 16px rgba(255,195,0,0.65); }
        }

        /* ===== 🔵 شكل دائري بديل لبطاقة المنتج (يتحكم فيه المدير عند إضافة/تعديل أي منتج) ===== */
        .product-item.shape-circle { background: transparent; border: none; box-shadow: none; }
        .product-item.shape-circle::after { display: none; }
        .product-item.shape-circle:hover { transform: translateY(-3px); box-shadow: none; }
        .product-item.shape-circle .product-image {
            width: 82%; aspect-ratio: 1 / 1; height: auto; margin: 8% auto 0;
            border-radius: 50%; border: 2px solid var(--gold-light);
            box-shadow: 0 4px 14px rgba(255,195,0,0.25);
        }
        .product-item.shape-circle .product-image::after { display: none; }
        .product-item.shape-circle .product-image img { border-radius: 50%; }
        .product-item.shape-circle:hover .product-image { box-shadow: 0 8px 22px rgba(255,195,0,0.45); }
        .product-item.shape-circle:hover .product-image img { transform: scale(1.08); }
        .product-item.shape-circle .product-info { text-align: center; padding: 8px 6px 12px; }
        .product-item.shape-circle .featured-badge { top: 2px; right: 2px; }
        
        /* ===== أقسام (ستايل KM Card: بطاقة عمودية بحدود ذهبية وتدرج خفيف) ===== */
        .category-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 20px; }
        .category-card {
            background: linear-gradient(145deg, var(--bg-card), var(--bg-input));
            border-radius: 16px;
            overflow: hidden; border: 1.5px solid var(--border-color);
            transition: var(--transition); text-decoration: none;
            box-shadow: var(--shadow-sm);
            position: relative;
        }
        .category-card:hover { transform: translateY(-5px) scale(1.02); border-color: var(--gold); box-shadow: 0 10px 24px rgba(255,195,0,0.28); }
        .category-card img { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; }
        .category-card .name {
            padding: 10px 6px; text-align: center; font-weight: 700; color: var(--text-primary);
            font-size: 0.85rem; background: rgba(0,0,0,0.12); border-top: 1.5px solid var(--border-color);
        }

        /* ===== أقسام فرعية (بطاقات صور قابلة للنقر داخل القسم الرئيسي) ===== */
        .subcategory-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 6px 0 22px; }
        .subcategory-card {
            background: linear-gradient(145deg, var(--bg-card), var(--bg-input));
            border-radius: 14px; overflow: hidden; border: 1.5px solid var(--border-color);
            transition: var(--transition); text-decoration: none; position: relative;
            box-shadow: var(--shadow-sm); display: block;
        }
        .subcategory-card:hover { transform: translateY(-4px) scale(1.02); border-color: var(--gold); box-shadow: 0 8px 20px rgba(255,195,0,0.3); }
        .subcategory-card-img {
            width: 100%; aspect-ratio: 1/1; overflow: hidden; display: flex; align-items: center; justify-content: center;
            background: var(--bg-input); font-size: 2rem;
        }
        .subcategory-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
        .subcategory-card:hover .subcategory-card-img img { transform: scale(1.08); }
        /* ===== v49.3: صورة مؤقتة بالاسم لأي منتج/قسم بدون صورة (نص HTML حقيقي بخط الموقع) ===== */
        .temp-name-box { width: 100%; height: 100%; min-height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; padding: 8px; box-sizing: border-box; color: #fff; font-weight: 800; line-height: 1.4; font-size: clamp(0.75rem, 3.6vw, 1.1rem); overflow: hidden; border-radius: inherit; text-shadow: 0 1px 4px rgba(0,0,0,0.5); position: relative; }
        .temp-name-box span { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
        .temp-name-box::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 85% 12%, rgba(255,255,255,0.18), transparent 55%); pointer-events: none; }
        .subcategory-card .name {
            padding: 8px 6px; text-align: center; font-weight: 700; color: var(--text-primary);
            font-size: 0.78rem; background: rgba(0,0,0,0.12); border-top: 1.5px solid var(--border-color);
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .subcategory-card .maintenance-badge {
            position: absolute; top: 6px; left: 6px; background: var(--danger); color: #fff;
            font-size: 0.55rem; padding: 2px 8px; border-radius: 20px; z-index: 2;
        }
        /* ===== ✨ وميض تحميل (Shimmer) لصور الأقسام/الأقسام الفرعية/المنتجات: بدل ما تظهر مربعات فارغة تماماً
        // بلا شكل لحد ما تكتمل الصورة (خصوصاً على إنترنت ضعيف حيث التحميل يتأخر ثواني)، يظهر تدرج متحرك
        // لطيف بمكان الصورة، ويختفي تلقائياً بمجرد اكتمال تحميلها (عبر كلاس img-loaded تضيفه جافاسكربت) ===== */
        @keyframes shimmerSweep { 0% { background-position: -300px 0; } 100% { background-position: 300px 0; } }
        .category-card img, .subcategory-card-img img, .product-item .product-image img {
            background: linear-gradient(90deg, var(--bg-input) 25%, rgba(255,195,0,0.14) 50%, var(--bg-input) 75%);
            background-size: 600px 100%;
            animation: shimmerSweep 1.3s ease-in-out infinite;
        }
        .category-card img.img-loaded, .subcategory-card-img img.img-loaded, .product-item .product-image img.img-loaded {
            animation: none; background: none;
        }
        /* ===== 🔵 شكل دائري بديل (يتحكم فيه المدير عند إضافة/تعديل أي قسم أو قسم فرعي) ===== */
        .subcategory-card.shape-circle { background: transparent; border: none; box-shadow: none; }
        .subcategory-card.shape-circle:hover { transform: translateY(-3px); box-shadow: none; }
        .subcategory-card.shape-circle .subcategory-card-img {
            position: relative; z-index: 1; overflow: visible;
            aspect-ratio: 1/1; width: 74%; margin: 8px auto 10px; border-radius: 50%;
            border: 3px solid var(--gold); background: var(--bg-input);
            box-shadow: 0 8px 20px -6px rgba(255,195,0,0.5);
            transition: var(--transition);
        }
        /* ✨ خلفية جميلة (هالة توهج ذهبية) خلف القسم الدائري */
        .subcategory-card.shape-circle .subcategory-card-img::before {
            content: ''; position: absolute; inset: -18%; z-index: -1; border-radius: 50%;
            background: radial-gradient(circle, rgba(255,195,0,0.42) 0%, rgba(255,224,102,0.24) 45%, transparent 75%);
            filter: blur(4px);
            transition: var(--transition);
        }
        .subcategory-card.shape-circle .subcategory-card-img img { border-radius: 50%; }
        .subcategory-card.shape-circle:hover .subcategory-card-img {
            border-color: var(--gold-light); box-shadow: 0 10px 26px -6px rgba(255,195,0,0.7); transform: scale(1.04);
        }
        .subcategory-card.shape-circle:hover .subcategory-card-img::before {
            background: radial-gradient(circle, rgba(255,195,0,0.58) 0%, rgba(255,224,102,0.32) 45%, transparent 75%);
        }
        .subcategory-card.shape-circle .name { background: transparent; border-top: none; font-weight: 700; white-space: normal; }

        /* ===== 💳 بطاقات وسائل الدفع (تصميم مختلف عن بطاقات الأقسام) ===== */
        .payment-methods-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 4px 0; }
        .payment-method-card {
            position: relative; display: flex; align-items: center; gap: 12px;
            background: var(--bg-card);
            border: 1px solid var(--border-color); border-radius: 16px;
            padding: 14px; text-decoration: none; overflow: hidden;
            transition: var(--transition);
        }
        .payment-method-card::before {
            content: ''; position: absolute; inset: 0; opacity: 0; pointer-events: none;
            background: linear-gradient(135deg, rgba(255,195,0,0.14), transparent 65%);
            transition: opacity .3s ease;
        }
        .payment-method-card:hover { transform: translateY(-3px); border-color: var(--gold); box-shadow: 0 10px 24px -8px rgba(255,195,0,0.4); }
        .payment-method-card:hover::before { opacity: 1; }
        .payment-method-card-icon {
            flex-shrink: 0; width: 46px; height: 46px; border-radius: 13px;
            display: flex; align-items: center; justify-content: center; font-size: 1.25rem;
            background: linear-gradient(145deg, rgba(255,195,0,0.18), rgba(255,195,0,0.05));
            border: 1px solid var(--border-gold); color: var(--gold); position: relative; z-index: 1;
        }
        .payment-method-card-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 13px; }
        .payment-method-card-body { flex: 1; min-width: 0; position: relative; z-index: 1; }
        .payment-method-card-name {
            font-weight: 700; font-size: 0.85rem; color: var(--text-primary);
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .payment-method-card-sub { font-size: 0.68rem; color: var(--text-muted); margin-top: 2px; }
        .payment-method-card-arrow { flex-shrink: 0; color: var(--text-muted); font-size: 0.8rem; position: relative; z-index: 1; }
        .payment-method-card:hover .payment-method-card-arrow { color: var(--gold); }
        .payment-method-card-bonus {
            position: absolute; top: -6px; left: -6px; z-index: 2;
            background: linear-gradient(135deg,#ff3d3d,#ff8a00); color: #fff;
            font-size: 0.6rem; font-weight: 800; padding: 3px 7px; border-radius: 20px;
            box-shadow: 0 2px 6px rgba(0,0,0,.4); white-space: nowrap;
        }
        /* ===== 🆕 لزقة نصية مخصصة (يكتبها الأدمن بحرية، مثال: "تلقائي") — بالزاوية المقابلة كي لا تتعارض مع شارة العرض/التوثيق ===== */
        .payment-method-card-tag {
            position: absolute; top: -6px; right: -6px; z-index: 2;
            background: linear-gradient(135deg,#2196f3,#0d47a1); color: #fff;
            font-size: 0.6rem; font-weight: 800; padding: 3px 7px; border-radius: 20px;
            box-shadow: 0 2px 6px rgba(0,0,0,.4); white-space: nowrap;
        }
        @media (max-width: 380px) {
            .payment-methods-grid { grid-template-columns: 1fr; }
        }

        /* ===== 🎨 صفحة تفاصيل وسيلة الدفع (إضافة رصيد) — تصميم واضح وملوّن ===== */
        .dm-card {
            background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius);
            padding: 18px; box-shadow: 0 4px 16px rgba(0,0,0,0.15);
        }
        .dm-header {
            display: flex; align-items: center; gap: 12px; margin-bottom: 18px;
            background: linear-gradient(135deg, rgba(255,195,0,0.14), rgba(255,195,0,0.03));
            border: 1px solid var(--border-gold); border-radius: 14px; padding: 12px 14px;
        }
        .dm-header-icon {
            flex-shrink: 0; width: 52px; height: 52px; border-radius: 13px; overflow: hidden;
            display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
            background: linear-gradient(145deg, rgba(255,195,0,0.22), rgba(255,195,0,0.06));
            border: 1px solid var(--border-gold); color: var(--gold); position: relative;
        }
        .dm-header-icon img { width: 100%; height: 100%; object-fit: cover; }
        .dm-header-title { font-size: 1.05rem; font-weight: 800; color: var(--text-primary); }
        .dm-header-sub { font-size: 0.75rem; color: var(--gold); font-weight: 700; margin-top: 2px; }
        .dm-back {
            flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
            background: var(--bg-input); border: 1px solid var(--border-color); color: var(--gold); text-decoration: none; font-size: 1rem;
        }
        .dm-info-row {
            display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; margin-bottom: 8px;
            border-radius: 10px; border: 1px solid; font-size: 0.82rem; line-height: 1.6;
        }
        .dm-info-row .dm-info-icon {
            flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 0.85rem;
        }
        .dm-info-row .dm-info-text { flex: 1; min-width: 0; word-break: break-word; }
        .dm-info-row .dm-info-label { font-weight: 700; display: block; margin-bottom: 2px; }
        .dm-info-currency { background: rgba(96,165,250,0.1); border-color: rgba(96,165,250,0.4); color: #93c5fd; }
        .dm-info-currency .dm-info-icon { background: rgba(96,165,250,0.18); color: #60a5fa; }
        .dm-info-wallet { background: rgba(255,195,0,0.08); border-color: var(--border-gold); color: var(--text-primary); }
        .dm-info-wallet .dm-info-icon { background: rgba(255,195,0,0.18); color: var(--gold); }
        .dm-info-details { background: rgba(168,85,247,0.08); border-color: rgba(168,85,247,0.35); color: var(--text-primary); }
        .dm-info-details .dm-info-icon { background: rgba(168,85,247,0.18); color: #c084fc; }
        .dm-info-note { background: rgba(148,163,184,0.08); border-color: rgba(148,163,184,0.3); color: var(--text-muted); }
        .dm-info-note .dm-info-icon { background: rgba(148,163,184,0.15); color: #94a3b8; }
        .dm-info-min { background: rgba(34,197,94,0.08); border-color: rgba(34,197,94,0.35); color: #86efac; }
        .dm-info-min .dm-info-icon { background: rgba(34,197,94,0.18); color: #4ade80; }
        .dm-info-fee { background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.35); color: #fca5a5; }
        .dm-info-fee .dm-info-icon { background: rgba(239,68,68,0.18); color: #f87171; }
        .dm-info-bonus { background: linear-gradient(135deg,rgba(255,61,61,0.1),rgba(255,138,0,0.1)); border-color: #ff8a00; color: #ffb347; font-weight: 700; }
        .dm-info-bonus .dm-info-icon { background: rgba(255,138,0,0.2); color: #ff8a00; }
        .dm-info-auto { background: rgba(255,195,0,0.1); border-color: var(--border-gold); color: var(--gold); }
        .dm-info-auto .dm-info-icon { background: rgba(255,195,0,0.2); color: var(--gold); }
        .dm-wallet-copy {
            flex-shrink: 0; background: var(--gold); color: #000; border: none; border-radius: 7px;
            padding: 6px 11px; font-size: 0.7rem; font-weight: 700; cursor: pointer; white-space: nowrap;
        }
        .dm-section-title {
            display: flex; align-items: center; gap: 8px; font-size: 0.85rem; font-weight: 800;
            color: var(--gold); margin: 18px 0 10px; padding-bottom: 8px; border-bottom: 1px dashed var(--border-gold);
        }
        .dm-form-group { margin-bottom: 14px; }
        .dm-form-group label {
            display: flex; align-items: center; gap: 7px; font-size: 0.82rem; font-weight: 700;
            color: var(--text-primary); margin-bottom: 6px;
        }
        .dm-form-group label .dm-label-icon {
            width: 22px; height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; flex-shrink: 0;
        }
        .dm-color-amount .dm-label-icon { background: rgba(34,197,94,0.18); color: #4ade80; }
        .dm-color-amount { border-color: rgba(34,197,94,0.35) !important; }
        .dm-color-equiv .dm-label-icon { background: rgba(96,165,250,0.18); color: #60a5fa; }
        .dm-color-details .dm-label-icon { background: rgba(168,85,247,0.18); color: #c084fc; }
        .dm-color-receipt .dm-label-icon { background: rgba(59,130,246,0.18); color: #60a5fa; }
        .dm-color-coupon .dm-label-icon { background: rgba(255,195,0,0.2); color: var(--gold); }
        .dm-color-custom .dm-label-icon { background: rgba(236,72,153,0.18); color: #f472b6; }
        .dm-form-group .form-control {
            border-width: 1.5px; transition: var(--transition);
        }
        .dm-form-group.dm-color-amount .form-control { border-color: rgba(34,197,94,0.4); }
        .dm-form-group.dm-color-amount .form-control:focus { border-color: #4ade80; }
        .dm-form-group.dm-color-equiv .form-control { border-color: rgba(96,165,250,0.4); }
        .dm-form-group.dm-color-equiv .form-control:focus { border-color: #60a5fa; }
        .dm-form-group.dm-color-details .form-control { border-color: rgba(168,85,247,0.35); }
        .dm-form-group.dm-color-receipt .form-control { border-color: rgba(59,130,246,0.35); }
        .dm-form-group.dm-color-coupon .form-control { border-color: rgba(255,195,0,0.4); }
        .dm-form-group.dm-color-custom .form-control { border-color: rgba(236,72,153,0.3); }
        .dm-hint { display: block; margin-top: 5px; font-size: 0.7rem; color: var(--text-muted); }
        .dm-pending-box {
            background: rgba(255,195,0,0.1); color: var(--gold); padding: 16px; border-radius: 12px;
            text-align: center; font-size: 0.88rem; border: 1px solid var(--border-gold); font-weight: 600;
        }
        .dm-approval-note {
            margin-top: 12px; font-size: 0.78rem; color: var(--text-muted); text-align: center;
            background: var(--bg-input); border-radius: 8px; padding: 8px;
        }

        /* ===== بانر ===== */
        .banner-slider {
            margin-top: 20px; border-radius: var(--radius-lg); overflow: hidden;
            background: var(--bg-card); aspect-ratio: 16/6;
            box-shadow: 0 20px 50px -12px rgba(255,195,0,0.25), var(--shadow-lg);
            position: relative; border: 1px solid rgba(255,195,0,0.28);
        }
        .banner-slider .slide { flex: 0 0 100%; scroll-snap-align: start; position: relative; overflow: hidden; }
        /* v61: الصورة تظهر كاملة دائماً (contain) بدون قص ولا زوم، وأي فراغ جانبي يُملأ بنسخة مغشّاة من نفس الصورة */
        .banner-slider .slide::before {
            content: ''; position: absolute; inset: -20px; z-index: 0;
            background: var(--bn) center / cover no-repeat; filter: blur(24px) brightness(.7) saturate(1.2);
        }
        .banner-slider .slide > a { display: block; height: 100%; position: relative; z-index: 1; }
        .banner-slider .slide img {
            width: 100%; height: 100%; object-fit: contain; object-position: center; display: block;
            position: relative; z-index: 1;
        }
        .banner-slider .slide .overlay { z-index: 2; }
        .banner-slider .slide .overlay {
            position: absolute; bottom: 0; left: 0; right: 0;
            padding: 22px 30px; background: linear-gradient(transparent, rgba(0,0,0,0.75));
            color: #fff; opacity: 0; transform: translateY(16px);
            transition: opacity .7s ease .15s, transform .7s ease .15s;
        }
        .banner-slider .slide.active .overlay { opacity: 1; transform: translateY(0); }
        .banner-slider .slide .overlay h3 { font-size: 1.3rem; font-weight: 800; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
        .banner-slider .slide .overlay p { opacity: 0.85; font-size: 0.9rem; }
        .banner-nav-btn {
            position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px;
            border-radius: 50%; background: rgba(0,0,0,0.4); color: #fff; border: none;
            display: flex; align-items: center; justify-content: center; cursor: pointer;
            z-index: 4; backdrop-filter: blur(4px); transition: all .25s ease; opacity: 0;
        }
        .banner-slider:hover .banner-nav-btn { opacity: 1; }
        .banner-nav-btn:hover { background: var(--gold); color: #000; transform: translateY(-50%) scale(1.08); }
        .banner-prev { left: 10px; } .banner-next { right: 10px; }
        .banner-dots {
            position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
            display: flex; gap: 6px; z-index: 4;
        }
        .banner-dot {
            width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.5);
            cursor: pointer; transition: all .25s ease; border: none; padding: 0;
        }
        .banner-dot.active { width: 22px; border-radius: 5px; background: var(--gold); }
        @media (max-width: 640px) { .banner-nav-btn { opacity: 1; width: 32px; height: 32px; } }

        /* ===== 🆕 لوحة تحكم البانرات: بطاقات قابلة للسحب والإفلات + معاينة حية ===== */
        .hs-banner-admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
        .hs-banner-admin-card {
            background: linear-gradient(145deg, var(--bg-card), var(--bg-input));
            border: 2px solid var(--border-gold); border-radius: 16px; overflow: hidden;
            position: relative; cursor: grab; transition: var(--transition);
            box-shadow: 0 3px 14px rgba(0,0,0,0.15);
        }
        .hs-banner-admin-card:hover { transform: translateY(-3px); border-color: var(--gold); box-shadow: 0 10px 26px -6px rgba(255,195,0,0.35); }
        .hs-banner-admin-card.hs-dragging { opacity: 0.4; cursor: grabbing; }
        .hs-banner-admin-card.hs-drag-over { border-color: var(--gold-light); box-shadow: 0 0 0 3px rgba(255,195,0,0.35) inset; }
        .hs-banner-admin-drag {
            position: absolute; top: 8px; right: 8px; z-index: 3; width: 28px; height: 28px; border-radius: 8px;
            background: rgba(0,0,0,0.45); color: var(--gold); display: flex; align-items: center; justify-content: center;
            font-size: 13px; backdrop-filter: blur(4px);
        }
        .hs-banner-admin-check { position: absolute; top: 12px; left: 12px; z-index: 3; width: 18px; height: 18px; cursor: pointer; }
        .hs-banner-admin-img { width: 100%; aspect-ratio: 16/8; background-size: cover; background-position: center; background-color: var(--bg-input); }
        .hs-banner-admin-status {
            position: absolute; top: 44px; right: 8px; z-index: 3; font-size: 0.6rem; font-weight: 700;
            padding: 3px 10px; border-radius: 20px; backdrop-filter: blur(4px);
        }
        .hs-banner-admin-status.on { background: rgba(16,185,129,0.85); color: #fff; }
        .hs-banner-admin-status.off { background: rgba(239,68,68,0.85); color: #fff; }
        .hs-banner-admin-body { padding: 12px 14px 14px; }
        .hs-banner-admin-body h5 { font-size: 0.9rem; font-weight: 800; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .hs-banner-admin-body p { font-size: 0.72rem; color: var(--text-muted); margin: 4px 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .hs-banner-admin-actions { display: flex; gap: 8px; }

        /* ===== معاينة حية داخل مودال إضافة/تعديل البانر ===== */
        .hs-banner-preview {
            position: relative; width: 100%; aspect-ratio: 16/7; border-radius: 14px; overflow: hidden;
            margin-bottom: 14px; border: 2px solid var(--border-gold); background: var(--bg-input);
        }
        .hs-banner-preview-img {
            position: absolute; inset: 0; background-size: cover; background-position: center;
            background-color: var(--bg-input); transition: background-image .25s ease;
        }
        .hs-banner-preview-img::after {
            content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.15) 55%, transparent 100%);
        }
        .hs-banner-preview-overlay { position: absolute; bottom: 0; right: 0; left: 0; padding: 12px 16px; z-index: 2; }
        .hs-banner-preview-overlay h5 { color: #fff; font-size: 1rem; font-weight: 800; text-shadow: 0 2px 8px rgba(0,0,0,0.6); }
        .hs-banner-preview-overlay p { color: rgba(255,255,255,0.85); font-size: 0.78rem; margin-top: 2px; text-shadow: 0 2px 6px rgba(0,0,0,0.6); }
        .hs-banner-preview-tag {
            position: absolute; top: 10px; left: 10px; z-index: 2; background: var(--gold-gradient); color: #1a1a2e;
            font-size: 0.6rem; font-weight: 800; padding: 3px 10px; border-radius: 20px;
        }
        
        /* ===== شريط متحرك (تصميم مطوّر) ===== */
        .ticker {
            background: linear-gradient(90deg, rgba(255,195,0,0.12), rgba(255,195,0,0.04) 40%, rgba(255,195,0,0.12)), var(--bg-card);
            backdrop-filter: blur(6px);
            border: 1px solid rgba(255,195,0,0.22); border-radius: var(--radius-sm);
            overflow: hidden; white-space: nowrap; height: 44px; line-height: 44px;
            margin-top: 15px; display: flex; align-items: center; direction: ltr;
            position: relative; box-shadow: 0 4px 14px rgba(0,0,0,0.12);
        }
        .ticker::before, .ticker::after {
            content: ''; position: absolute; top: 0; bottom: 0; width: 40px; z-index: 2; pointer-events: none;
        }
        .ticker::before { left: 0; background: linear-gradient(90deg, var(--bg-card), transparent); }
        .ticker::after { right: 0; background: linear-gradient(270deg, var(--bg-card), transparent); }
        .ticker-track { display: inline-flex; white-space: nowrap; animation: tickerSlide 26s linear infinite; }
        @keyframes tickerSlide { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
        .ticker:hover .ticker-track { animation-play-state: paused; }
        .ticker-item {
            display: inline-flex; align-items: center; gap: 8px; padding: 0 24px; direction: rtl;
            color: var(--text-primary); font-weight: 600; font-size: 0.82rem;
        }
        .ticker-item:not(:first-child) { border-right: 1px solid rgba(255,195,0,0.3); }
        
        /* ===== محفظة ===== */
        .wallet-container { max-width: 600px; margin: 0 auto; padding: 16px; }
        .wallet-balance { text-align: center; padding: 30px; background: var(--bg-card); border-radius: var(--radius); border: 1px solid var(--border-gold); }
        .wallet-balance .amount { font-size: 3rem; color: var(--success); font-weight: 700; }
        .wallet-balance .label { color: var(--text-muted); font-size: 0.9rem; }
        
        /* ===== طلبات ===== */
        .order-item {
            background: var(--bg-card); border-radius: var(--radius);
            padding: 14px 18px; border: 1px solid var(--border-color);
            margin-bottom: 10px; transition: var(--transition);
        }
        .order-item:hover { border-color: var(--gold); }
        .order-item .order-header { display: flex; justify-content: space-between; align-items: center; }
        .order-item .order-number { font-weight: 700; font-size: 0.9rem; }
        .order-item .order-details { display: flex; justify-content: space-between; margin-top: 6px; color: var(--text-muted); font-size: 0.8rem; }
        
        /* ===== فوتر ===== */
        .site-footer {
            padding: 25px 10px 80px; text-align: center;
            background: var(--footer-bg); border-top: 1px solid var(--border-color);
            position: relative; overflow: hidden;
        }
        .site-footer::before {
            content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 2px;
            background: var(--gold-gradient); background-size: 200% 100%;
            animation: shimmerMove 6s linear infinite; opacity: 0.5;
        }
        .site-footer .footer-logo { font-size: 1.2rem; font-weight: 900; background: var(--gold-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-size: 200% auto; animation: shimmerMove 5s linear infinite; display: inline-block; }
        .site-footer p { margin: 0; font-size: 0.85rem; color: var(--text-muted); opacity: 0.7; }
        
        /* ===== مودالات ===== */
        .modal-overlay {
            display: none; position: fixed; top: 0; left: 0;
            width: 100%; height: 100%; background: var(--modal-overlay);
            z-index: 99999; justify-content: center; align-items: center;
            backdrop-filter: blur(8px);
        }
        .modal-overlay.active { display: flex; }
        .modal-box {
            background: var(--bg-card); border-radius: var(--radius);
            padding: 28px; max-width: 550px; width: 95%; border: 1px solid var(--gold);
            max-height: 90vh; overflow-y: auto; animation: modalIn 0.3s ease;
            box-shadow: 0 24px 70px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,195,0,0.08), 0 0 40px -10px rgba(255,195,0,0.25);
        }
        @keyframes modalIn {
            from { opacity: 0; transform: scale(0.95) translateY(-20px); }
            to { opacity: 1; transform: scale(1) translateY(0); }
        }
        .modal-box .close-modal {
            float: left; font-size: 1.4rem; color: var(--text-muted);
            cursor: pointer; background: none; border: none; transition: var(--transition);
        }
        .modal-box .close-modal:hover { color: var(--danger); transform: rotate(90deg); }
        .modal-box h3 { color: var(--gold); margin-bottom: 20px; display: flex; align-items: center; gap: 10px; font-size: 1.1rem; }
        
        /* ===== لوحة التحكم ===== */
        .admin-container { max-width: 1400px; margin: 0 auto; padding: 16px; }
        .admin-header {
            display: flex; justify-content: space-between; align-items: center;
            flex-wrap: wrap; gap: 12px; padding: 16px 24px;
            background: var(--bg-card); border-radius: var(--radius);
            border: 1px solid var(--border-gold); margin-bottom: 20px;
            box-shadow: var(--shadow);
        }
        .admin-header h1 { color: var(--gold); font-size: 1.3rem; display: flex; align-items: center; gap: 10px; }
        .admin-stats {
            display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 16px; margin-bottom: 24px;
        }
        .admin-stat {
            background: var(--bg-card); padding: 20px 18px; border-radius: var(--radius-lg);
            border: 1px solid var(--border-color); text-align: center;
            transition: var(--transition); position: relative; overflow: hidden;
            box-shadow: var(--shadow-sm); animation: fadeInUp 0.45s ease both;
        }
        .admin-stat::before {
            content: ''; position: absolute; top: 0; left: 0; right: 0;
            height: 3px; background: var(--gold-gradient);
            background-size: 200% auto; animation: shimmerMove 3s linear infinite;
        }
        .admin-stat::after {
            content: ''; position: absolute; top: -40%; right: -30%; width: 140px; height: 140px;
            background: radial-gradient(circle, rgba(255,195,0,0.18) 0%, transparent 70%);
            pointer-events: none; opacity: 0; transition: opacity 0.35s ease;
        }
        .admin-stat:hover { border-color: var(--gold); transform: translateY(-5px) scale(1.015); box-shadow: 0 16px 36px rgba(255,195,0,0.2), var(--shadow-lg); }
        .admin-stat:hover::after { opacity: 1; }
        .admin-stat .number {
            font-size: 1.7rem; font-weight: 800; position: relative;
            background: var(--gold-gradient); background-size: 200% auto;
            -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
        }
        .admin-stat .label { font-size: 0.65rem; color: var(--text-muted); margin-top: 5px; font-weight: 600; letter-spacing: 0.2px; }
        .admin-stat .trend { font-size: 0.55rem; margin-top: 4px; font-weight: 600; }
        .admin-stat .trend.up { color: var(--success); }
        .admin-stat .trend.down { color: var(--danger); }
        .admin-card {
            background: var(--bg-card); border-radius: var(--radius);
            padding: 18px; border: 1px solid var(--border-color);
            margin-bottom: 16px; box-shadow: var(--shadow);
            transition: var(--transition); position: relative; overflow: hidden;
        }
        .admin-card::before {
            content: ''; position: absolute; top: 0; right: 0; left: 0; height: 2px;
            background: var(--gold-gradient); background-size: 200% auto;
            opacity: 0; transition: opacity 0.3s ease;
        }
        .admin-card:hover { border-color: var(--border-gold); box-shadow: var(--shadow-lg); }
        .admin-card:hover::before { opacity: 1; animation: shimmerMove 3s linear infinite; }
        .admin-card h4 {
            color: var(--gold); border-bottom: 1px solid var(--border-color);
            padding-bottom: 10px; margin-bottom: 14px;
            display: flex; align-items: center; gap: 10px;
            font-size: 0.95rem;
        }
        .admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
        .admin-sidebar {
            background: var(--bg-card); border-radius: var(--radius);
            border: 1px solid var(--border-color); padding: 12px;
            position: sticky; top: 80px; max-height: calc(100vh - 120px);
            overflow-y: auto; box-shadow: var(--shadow);
        }
        .admin-sidebar::-webkit-scrollbar { width: 4px; }
        .admin-sidebar::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 4px; }
        .admin-sidebar .sidebar-title {
            color: var(--text-muted); font-size: 0.55rem; text-transform: uppercase;
            letter-spacing: 2px; padding: 6px 12px 2px; font-weight: 700;
        }
        .admin-sidebar a {
            display: flex; align-items: center; gap: 10px;
            padding: 8px 12px; border-radius: var(--radius-sm);
            color: var(--text-muted); transition: var(--transition);
            font-size: 0.8rem; border-right: 3px solid transparent;
            text-decoration: none; margin-bottom: 2px;
        }
        .admin-sidebar a:hover { background: rgba(255,195,0,0.06); color: var(--gold); }
        .admin-sidebar a.active { background: rgba(255,195,0,0.1); color: var(--gold); border-right-color: var(--gold); }
        .admin-sidebar a i { width: 18px; text-align: center; font-size: 0.85rem; }
        .admin-sidebar .badge-count {
            background: var(--gold); color: #fff; padding: 0 8px;
            border-radius: 10px; font-size: 0.55rem; font-weight: 700;
            margin-right: auto;
        }
        .admin-sidebar .badge-danger { background: var(--danger); }
        .admin-sidebar .divider { border: none; height: 1px; background: var(--border-color); margin: 6px 0; }
        
        /* ===== شارت ===== */
        .chart-container { height: 220px; position: relative; }
        
        /* ===== بادج ===== */
        .badge { padding: 3px 11px; border-radius: 12px; font-size: 0.6rem; font-weight: 700; display: inline-block; box-shadow: inset 0 0 0 1px currentColor; }
        .badge-success { background: rgba(16,185,129,0.15); color: var(--success); }
        .badge-pending { background: rgba(245,158,11,0.15); color: var(--warning); }
        .badge-danger { background: rgba(239,68,68,0.15); color: var(--danger); }
        .badge-gold { background: rgba(255,195,0,0.15); color: var(--gold); }
        .badge-info { background: rgba(59,130,246,0.15); color: var(--info); }
        
        /* ===== جدول ===== */
        .table-responsive { overflow-x: auto; }
        .table { width: 100%; border-collapse: collapse; font-size: 0.75rem; }
        .table th, .table td { padding: 8px 12px; text-align: right; border-bottom: 1px solid var(--border-color); }
        .table th { color: var(--text-muted); font-weight: 600; font-size: 0.6rem; text-transform: uppercase; letter-spacing: 1px; }
        .table tr:hover td { background: rgba(255,195,0,0.03); }
        
        /* ===== أدوات عامة ===== */
        .text-center { text-align: center; }
        .text-muted { color: var(--text-muted); }
        .text-gold { color: var(--gold); }
        .text-success { color: var(--success); }
        .text-danger { color: var(--danger); }
        .flex { display: flex; }
        .flex-between { display: flex; align-items: center; justify-content: space-between; }
        .flex-center { display: flex; align-items: center; justify-content: center; }
        .gap-8 { gap: 8px; }
        .gap-12 { gap: 12px; }
        .w-full { width: 100%; }
        .mt-16 { margin-top: 16px; }
        .mb-16 { margin-bottom: 16px; }
        .p-16 { padding: 16px; }
        
        /* ===== 🧭 v27: مركز القيادة + بحث القائمة الجانبية ===== */
        .cc-wrap { margin-bottom: 18px; }
        .cc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
        .cc-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius); padding: 14px 14px 12px; }
        .cc-label { font-size: 0.7rem; color: var(--text-muted); font-weight: 700; }
        .cc-num { font-size: 1.35rem; font-weight: 800; color: var(--text-primary); margin: 4px 0 2px; direction: ltr; text-align: right; }
        .cc-sub { font-size: 0.65rem; color: var(--text-muted); line-height: 1.6; }
        .cc-d.up { color: var(--success, #10b981); font-weight: 800; }
        .cc-d.down { color: var(--danger, #ef4444); font-weight: 800; }
        .cc-todo { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
        .cc-chip { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 8px 14px; border-radius: 999px; font-size: 0.75rem; text-decoration: none;
                   background: var(--bg-card); color: var(--text-muted); border: 1px solid var(--border-color); }
        .cc-chip b { color: var(--text-primary); }
        .cc-chip small { font-size: 0.62rem; opacity: 0.8; }
        .cc-chip.warn { border-color: var(--danger, #ef4444); color: var(--text-primary); background: rgba(239,68,68,0.10); }
        .cc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
        .cc-actions a { padding: 7px 14px; border-radius: 10px; font-size: 0.72rem; font-weight: 700; text-decoration: none; background: var(--btn-bg, var(--gold-gradient)); color: var(--btn-text, #1a1200); }
        .admin-side-search { width: 100%; box-sizing: border-box; margin-bottom: 8px; padding: 9px 14px; border-radius: 999px; border: 1.5px solid transparent;
                             background: var(--bg-input); color: var(--text-primary); font-size: 0.78rem; font-family: inherit; }
        .admin-side-search:focus { outline: none; border-color: var(--gold); }
        @media (max-width: 992px) { .cc-grid { grid-template-columns: repeat(2, 1fr); } .admin-side-search { flex: 1 1 100%; } }
        @media (max-width: 480px) { .cc-num { font-size: 1.1rem; } .cc-chip { font-size: 0.7rem; padding: 7px 11px; } }

        /* ===== استجابة ===== */
        .admin-layout { display: grid; grid-template-columns: 240px 1fr; gap: 20px; }
        @media (max-width: 1400px) {
            /* على شاشات اللابتوب: القائمة الجانبية تصير شريط أفقي بالأعلى بدل عمود ثابت 240px،
               عشان الجداول العريضة (زي جدول المستخدمين) تاخد العرض الكامل وتظهر كل أعمدتها بدون ما تختفي تحت القائمة */
            .admin-layout { grid-template-columns: 1fr; }
            .admin-sidebar { position: static; max-height: none; display: flex; flex-wrap: wrap; gap: 4px; padding: 10px; }
            .admin-sidebar a { padding: 6px 12px; font-size: 0.7rem; border-right: none; border-bottom: 2px solid transparent; flex: 1 1 auto; }
            .admin-sidebar a.active { border-right: none; border-bottom-color: var(--gold); }
            .admin-sidebar .sidebar-title { display: none; }
            .admin-sidebar .divider { display: none; }
        }
        @media (max-width: 992px) {
            .admin-grid { grid-template-columns: 1fr; }
            .admin-stats { grid-template-columns: repeat(3, 1fr); }
        }
        @media (max-width: 768px) {
            .side-nav { width: 300px; right: -320px; }
            .products-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
            .category-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
            .subcategory-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
            .admin-stats { grid-template-columns: repeat(2, 1fr); }
            .banner-slider { aspect-ratio: 16/7; }
            .ticker { height: 40px; line-height: 40px; }
            .ticker-item { font-size: 0.72rem; padding: 0 16px; }
            .wallet-balance .amount { font-size: 2.2rem; }
            .admin-header h1 { font-size: 1rem; }
        }
        @media (max-width: 480px) {
            .products-grid { gap: 8px; }
            .product-item .product-image { height: 80px; }
            .product-item .product-info h4 { font-size: 0.7rem; }
            .category-grid { gap: 8px; }
            .category-card .name { font-size: 0.7rem; padding: 6px; }
            .subcategory-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
            .subcategory-card .name { font-size: 0.68rem; padding: 6px; }
            .side-nav { width: 260px; right: -280px; padding: 16px; }
            .admin-stats { grid-template-columns: 1fr 1fr; }
            .admin-stat .number { font-size: 1.2rem; }
            .modal-box { padding: 16px; }

            /* ===== راحة أكبر بالجوال: أزرار وحقول أوسع، ومسافات أهدأ، خصوصاً بصفحة تفاصيل المنتج ===== */
            button, .btn-gold, .btn-gold-full, .btn-danger, a.btn-gold { min-height: 44px; }
            .form-control, select.form-control, textarea.form-control { min-height: 44px; }
        }
        
        /* ===== ثيم سويتش ===== */
        .theme-switch-wrapper {
            display: flex; align-items: center; justify-content: center; gap: 12px;
            padding: 8px 0;
        }
        .theme-switch {
            position: relative; display: inline-block; width: 50px; height: 26px;
        }
        .theme-switch input { opacity: 0; width: 0; height: 0; }
        .theme-slider {
            position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
            background: #e2e8f0; transition: .4s; border-radius: 34px;
            display: flex; align-items: center; justify-content: space-between;
            padding: 0 4px; border: 1px solid rgba(0,0,0,0.05);
        }
        [data-theme="dark"] .theme-slider { background: #2dd4bf; }
        .theme-slider .sun-icon, .theme-slider .moon-icon { font-size: 11px; transition: .3s; }
        .theme-slider .sun-icon { color: #f59e0b; opacity: 1; }
        .theme-slider .moon-icon { color: #94a3b8; opacity: 0; }
        [data-theme="dark"] .theme-slider .sun-icon { opacity: 0; }
        [data-theme="dark"] .theme-slider .moon-icon { opacity: 1; color: #fff; }
        .theme-slider:before {
            position: absolute; content: ""; height: 20px; width: 20px;
            left: 3px; bottom: 2px; background: white;
            transition: .4s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 50%;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1); z-index: 2;
        }
        input:checked + .theme-slider:before { transform: translateX(24px); }
        .theme-label { font-size: 0.85rem; color: var(--text-secondary); }
        
        /* ===== رسالة منبثقة ===== */
        .popup-overlay {
            display: none; position: fixed; top: 0; left: 0;
            width: 100%; height: 100%; background: rgba(0,0,0,0.8);
            z-index: 99999; justify-content: center; align-items: center;
            backdrop-filter: blur(10px);
        }
        .popup-overlay.active { display: flex; }
        .popup-box {
            background: var(--bg-card); border-radius: var(--radius);
            padding: 0; max-width: 500px; width: 95%; overflow: hidden;
            border: 2px solid var(--gold); text-align: center;
            animation: popupIn 0.5s ease; position: relative;
            box-shadow: 0 20px 60px rgba(0,0,0,0.5);
        }
        @keyframes popupIn {
            from { opacity: 0; transform: scale(0.8) translateY(30px); }
            to { opacity: 1; transform: scale(1) translateY(0); }
        }
        .popup-box .popup-close {
            position: absolute; top: 10px; left: 10px;
            width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
            font-size: 2rem; line-height: 1; color: #fff;
            cursor: pointer; transition: var(--transition);
            background: rgba(0,0,0,0.45); border: none; border-radius: 50%;
            z-index: 2;
        }
        .popup-box .popup-close:hover { color: #fff; background: var(--danger); transform: rotate(90deg); }
        @media (max-width: 480px) {
            .popup-box .popup-close { width: 44px; height: 44px; font-size: 2.1rem; }
        }
        .popup-box .popup-content { font-size: 1.1rem; line-height: 1.8; color: var(--text-primary); }
        .popup-box .popup-btn {
            margin-top: 15px; padding: 10px 30px;
            background: var(--gold-gradient); color: #fff;
            border: none; border-radius: var(--radius-sm); font-weight: 700;
            font-size: 1rem; cursor: pointer; transition: var(--transition);
        }
        .popup-box .popup-btn:hover { transform: scale(1.05); }
        
        /* ===== شريط التنبيهات ===== */
        .alert-bar {
            background: linear-gradient(135deg, var(--gold), var(--gold-light));
            color: #fff; text-align: center; padding: 8px 16px;
            font-size: 0.85rem; font-weight: 600; position: sticky;
            top: 62px; z-index: 999; box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        /* ===== تحسينات بصرية إضافية (مستوحاة من تصميم km-store الإداري) ===== */
        .admin-card { transition: box-shadow .2s ease, transform .2s ease; }
        .admin-card:hover { box-shadow: 0 10px 30px rgba(0,0,0,0.08); }
        .admin-stat { transition: box-shadow .2s ease, transform .2s ease; }
        .admin-stat:hover { transform: translateY(-3px); }
        .table thead th { position: sticky; top: 0; background: var(--bg-card); z-index: 1; }
        .table tbody tr { transition: background .15s ease; }
        input[type="checkbox"].sup-check { width: 16px; height: 16px; accent-color: var(--gold); cursor: pointer; }
        [id$="Modal"] .modal-box hr { opacity: 0.5; }
        
    /* ===== مفتاح تبديل أنيق (Toggle Switch) ===== */
    .switch { position: relative; display: inline-block; width: 46px; height: 26px; flex-shrink: 0; }
    .switch input { opacity: 0; width: 0; height: 0; }
    .switch .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255,255,255,0.15); transition: 0.3s; }
    .switch .slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 3px; bottom: 3px; background-color: #fff; transition: 0.3s; }
    .switch input:checked + .slider { background: linear-gradient(135deg,#a855f7,#7c3aed); }
    .switch input:checked + .slider:before { transform: translateX(20px); }
    .switch .slider.round { border-radius: 34px; }
    .switch .slider.round:before { border-radius: 50%; }

    /* ============================================
       🧊 طبقة الستايل ثلاثي الأبعاد (3D) للمتجر
       تُضاف فوق كل الأنماط الموجودة دون تغيير أي HTML: عمق حقيقي بالظلال،
       ميلان خفيف عند التحويم، وإحساس "زر يُضغط" فعلياً عند النقر.
       ============================================ */
    .category-grid, .products-grid { perspective: 1200px; }

    .category-card, .product-item, .admin-stat, .admin-card, .card, .modal-box {
        transform-style: preserve-3d;
        box-shadow:
            0 1px 0 rgba(255,255,255,0.6) inset,
            0 -6px 14px rgba(0,0,0,0.06) inset,
            0 10px 24px rgba(17,24,39,0.10),
            0 2px 6px rgba(17,24,39,0.08);
    }
    [data-theme="dark"] .category-card,
    [data-theme="dark"] .product-item,
    [data-theme="dark"] .admin-stat,
    [data-theme="dark"] .admin-card,
    [data-theme="dark"] .card,
    [data-theme="dark"] .modal-box {
        box-shadow:
            0 1px 0 rgba(255,255,255,0.05) inset,
            0 -6px 14px rgba(0,0,0,0.35) inset,
            0 14px 30px rgba(0,0,0,0.45),
            0 2px 6px rgba(0,0,0,0.3);
    }

    .category-card:hover, .product-item:hover {
        transform: translateY(-8px) rotateX(4deg) rotateY(-2deg) scale(1.015);
        box-shadow:
            0 1px 0 rgba(255,255,255,0.6) inset,
            0 22px 40px rgba(255,195,0,0.20),
            0 10px 20px rgba(17,24,39,0.18);
    }
    .admin-stat:hover {
        transform: translateY(-6px) rotateX(3deg) scale(1.02);
    }

    /* ===== أزرار بإحساس زر فيزيائي حقيقي: بروز عند الاستقرار، وانطباع عند الضغط ===== */
    .btn-gold, .btn-gold-full, .btn-danger, button[type="submit"] {
        box-shadow:
            0 1px 0 rgba(255,255,255,0.35) inset,
            0 -3px 6px rgba(0,0,0,0.18) inset,
            0 6px 14px rgba(0,0,0,0.18);
        transform: translateY(0);
        transition: transform .12s ease, box-shadow .12s ease;
    }
    .btn-gold:active, .btn-gold-full:active, .btn-danger:active, button[type="submit"]:active {
        transform: translateY(2px);
        box-shadow:
            0 1px 0 rgba(255,255,255,0.2) inset,
            0 -2px 4px rgba(0,0,0,0.22) inset,
            0 2px 4px rgba(0,0,0,0.15);
    }

    /* ===== صورة المنتج: عمق طفيف يفصلها بصرياً عن بطاقتها ===== */
    .product-image, .category-card img {
        box-shadow: 0 6px 14px rgba(0,0,0,0.12);
        transform: translateZ(8px);
    }

    /* ===== الشريحة الذهبية العلوية لبطاقات الإدارة: توهج يوحي بحافة معدنية مضيئة ===== */
    .admin-card::before, .admin-stat::before {
        box-shadow: 0 0 10px rgba(255,195,0,0.5);
    }

    /* ===== تقليل الميل التفاعلي على الأجهزة اللمسية (لا يوجد تحويم حقيقي بالجوال) ===== */
    @media (hover: none) {
        .category-card:hover, .product-item:hover, .admin-stat:hover {
            transform: none;
        }
    }

    /* ===== 🎨 ستايل "بنتاكون" (مطابق لفيديو المرجع): خلفية كحلية #292c5e + هيدر وشريط سفلي بنفسجي #5822c6،
       بطاقات مسطحة بدون إطارات، شبكة 4 أعمدة، بحث على شكل حبة، شارات حمراء. يُطبَّق افتراضياً على كل المتجر؛
       لإرجاع الستايل القديم ضع الإعداد ui_style = classic في جدول settings ===== */
        :root, [data-theme="dark"], [data-theme="light"] {
        color-scheme: dark;
        --gold: #6d3fe0; --gold-light: #a78bfa;
        --gold-gradient: linear-gradient(135deg, #5822c6 0%, #7b3ff2 100%);
        --primary-color: #5822c6; --secondary-color: #1fc8b4;
        --accent: #1fc8b4; --accent-light: #5eead4;
        --accent-gradient: linear-gradient(135deg, #1fc8b4, #5822c6);
        --mesh-gradient: none;
        --bg-primary: #292c5e; --bg-secondary: #30346a; --bg-card: #30346a;
        --bg-input: #363a73; --bg-hover: #3d4180;
        --text-primary: #ffffff; --text-secondary: #e6e8ff; --text-muted: #b3b8e6; --text-light: #8f95c9;
        --border-color: rgba(255,255,255,0.08); --card-border: rgba(255,255,255,0.08);
        --border-gold: rgba(124,77,255,0.35);
        --header-bg: #5822c6; --footer-bg: #20234d; --sidebar-bg: #24274f; --sidebar-text: #ffffff;
        --bottom-nav-bg: #5822c6; --bottom-nav-icon: #ffffff;
        --btn-bg: linear-gradient(135deg, #5822c6 0%, #7b3ff2 100%); --btn-text: #ffffff;
        --shadow-sm: none; --shadow: 0 6px 20px rgba(10,10,40,0.35); --shadow-lg: 0 12px 36px rgba(10,10,40,0.5);
        --shadow-gold: 0 6px 18px rgba(88,34,198,0.45);
        --glass-bg: rgba(48,52,106,0.7); --glass-border: rgba(255,255,255,0.08);
        --modal-overlay: rgba(12,13,40,0.8);
        --radius: 14px; --radius-sm: 10px; --radius-lg: 18px;
    }
    html body { background: #292c5e !important; color: #ffffff; }

    /* الهيدر: شريط بنفسجي بعرض الشاشة (بدل البطاقة الدائرية) */
    html body .hs-header, html body .main-header {
        background: #5822c6 !important; margin: 0 !important; border-radius: 0 !important;
        border: none !important; box-shadow: none !important; padding: 10px 14px !important;
        position: sticky; top: 0; z-index: 1000;
    }
    html body .main-header::after { display: none; }
    html body .hs-logo a { color: #ffffff; font-weight: 800; }
    html body .hs-balance {
        background: rgba(255,255,255,0.14); color: #fff; border-radius: 16px; padding: 5px 11px; font-weight: 700;
    }
    html body .hs-balance i { color: #ffffff; }
    html body .hs-icon-btn { color: #ffffff; }
    html body .hs-icon-btn:hover { background: rgba(255,255,255,0.16); color: #ffffff; }
    html body #auth-btn-header { background: #ffffff; color: #5822c6; border-radius: 16px; }
    html body .hs-vip-btn { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.5); color: #fff; }

    /* البحث: حبة بلون أفتح من الخلفية */
    html body .hs-search-wrap .form-control, html body .form-control {
        background: #363a73 !important; color: #ffffff !important; border: 1.5px solid transparent !important;
    }
    html body .hs-search-wrap .form-control { border-radius: 26px !important; }
    html body .form-control::placeholder { color: #aab0e0; }
    html body .form-control:focus { border-color: #7b3ff2 !important; box-shadow: 0 0 0 3px rgba(123,63,242,0.25) !important; }

    /* شبكة الألعاب/الأقسام: 4 أعمدة، بطاقات مسطحة، الاسم أبيض تحت الأيقونة */
    html body .hs-grid-container { grid-template-columns: repeat(3, 1fr); gap: 18px 10px; margin: 16px 14px; }
    html body .hs-card {
        background: transparent; border: none; box-shadow: none; padding: 2px; color: #fff;
    }
    html body .hs-card:hover { transform: translateY(-2px); box-shadow: none; border-color: transparent; }
    html body .hs-card-icon {
        width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 16px; margin: 0 auto 6px;
        background: #30346a; border: none;
    }
    html body .hs-card-icon img { border-radius: 16px; }
    html body .hs-card h3 { font-size: 11px; font-weight: 700; color: #ffffff; }
    html body .hs-card .hs-maint-badge { background: #e5334b; }

    /* بقية البطاقات (أقسام/منتجات/لوحات): مسطحة، بدون الطبقة ثلاثية الأبعاد */
    html body .category-card, html body .product-item, html body .subcategory-card,
    html body .card, html body .admin-card, html body .modal-box {
        background: #30346a; border: 1px solid rgba(255,255,255,0.07); border-radius: 16px;
        box-shadow: none; transform-style: flat;
    }
    html body .category-card:hover, html body .product-item:hover, html body .subcategory-card:hover {
        transform: translateY(-3px); border-color: #7b3ff2; box-shadow: 0 8px 22px rgba(88,34,198,0.35);
    }
    html body .category-card .name { background: transparent; border-top: none; color: #fff; }
    html body .product-item .product-info .price { color: #ffffff; font-weight: 800; }
    html body .featured-badge, html body .featured-badge.discount-badge { background: #e5334b; color: #fff; border-radius: 8px; }
    html body .product-item::before, html body .product-item::after,
    html body .category-card::before, html body .subcategory-card::before { display: none; }

    /* الأزرار: بنفسجي متدرّج */
    html body .btn-gold, html body .btn-gold-full, html body button[type="submit"] {
        background: linear-gradient(135deg, #5822c6 0%, #7b3ff2 100%); color: #ffffff; border: none; border-radius: 12px;
        box-shadow: none; text-shadow: none;
    }
    html body .btn-gold:hover, html body .btn-gold-full:hover, html body button[type="submit"]:hover { filter: brightness(1.12); }

    /* الشريط السفلي: بنفسجي بعرض الشاشة، أيقونات بيضاء، أيقونة فعّالة بدائرة تركوازية، زر الرئيسية عادي */
    html body .hs-bottom-nav {
        background: linear-gradient(90deg, #35309a 0%, #5822c6 55%, #5822c6 100%) !important;
        background-image: linear-gradient(90deg, #35309a 0%, #5822c6 55%, #5822c6 100%) !important;
        border-radius: 0; border-top: none; box-shadow: 0 -4px 18px rgba(10,10,40,0.35);
        backdrop-filter: none; -webkit-backdrop-filter: none; padding: 8px 18px;
    }
    html body .hs-nav-icon { color: #ffffff; }
    html body .hs-nav-icon::before { background: #1fc8b4; }
    html body .hs-nav-icon:hover, html body .hs-nav-icon.hs-active { color: #ffffff; transform: none; }
    html body .hs-home-btn {
        background: transparent; width: 42px; height: 42px; margin-top: 0; border: none;
        box-shadow: none; animation: none;
    }
    html body .hs-home-btn i { color: #ffffff; }
    html body .hs-home-btn:hover { transform: none; }
    html body .hs-badge { background: #e5334b; }

    /* ===== 🎬 v25 — مطابقة حرفية لفيديو المرجع: شاشة التحميل، شبكة الباقات، نافذة الشراء ===== */

    /* شاشة التحميل: خلفية كحلية مسطحة + شعار فقط + قوس بنفسجي يدور حوله (بدون حلقات/عنوان/ظل ثلاثي الأبعاد) */
    html body #splashScreen, html body #splashScreen.has-custom-bg, html body #splashScreen.splash-flat, html body #splashScreen.no-bg {
        background: #292c5e !important; background-image: none !important; animation: none !important;
    }
    html body #splashScreen::before, html body #splashScreen .splash-ring, html body #splashScreen .splash-shadow,
    html body #splashScreen .splash-title, html body #splashScreen .splash-sub { display: none !important; }
    html body #splashScreen .splash-3d-stage { transform: none !important; }
    html body #splashScreen .splash-logo-wrap { animation: none !important; width: 96px; height: 96px; }
    html body #splashScreen .splash-logo {
        width: 72px; height: auto; padding: 0; border-radius: 0; background: transparent !important;
        border: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
    }
    html body #splashScreen .loader {
        position: absolute; width: 96px; height: 96px; margin-top: 0; filter: none;
        background: conic-gradient(from 0deg, rgba(88,34,198,0), #5822c6 300deg, rgba(88,34,198,0));
        -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
        mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
        animation: spinLoader 1.1s linear infinite;
    }

    /* شبكة الباقات/المنتجات: 4 أعمدة، بطاقات نصية مسطحة (الكمية فوق والسعر تحتها) */
    html body .products-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 14px 6px !important; }
    @media (min-width: 768px) { html body .products-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important; } }
    html body .product-item {
        background: transparent !important; border: none !important; box-shadow: none !important;
        text-align: center; padding: 4px 2px;
    }
    html body .product-item:hover { transform: none; border-color: transparent; box-shadow: none; }
    html body .product-item .product-image { background: #30346a; border-radius: 14px; }
    html body .product-item .product-info h4 { font-size: 11px; font-weight: 700; color: #ffffff; text-align: center; }
    html body .product-item .product-info .price, html body .product-item .product-info [class*="price"] {
        font-size: 11px; font-weight: 800; color: #d9dcf5; text-align: center;
    }
    html body .subcategory-grid { gap: 18px 10px; }
    html body .subcategory-card { background: transparent !important; border: none !important; box-shadow: none !important; }
    html body .subcategory-card .name { color: #ffffff; font-size: 12px; font-weight: 700; text-align: center; }

    /* نافذة الشراء السريع: خلفية داكنة، صندوق كحلي بزوايا خفيفة، شارة السعر يسار والاسم+القلب يمين */
    html body .modal-overlay { background: rgba(18,19,32,0.88) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
    html body #quickBuyModal .qb-box {
        background: #2b2e66 !important; border: none !important; border-radius: 8px !important;
        box-shadow: none !important; padding: 22px 18px 18px; max-width: 360px;
    }
    html body #quickBuyModal .qb-box::before { display: none !important; }
    html body #quickBuyModal .qb-price-badge {
        right: auto !important; left: 18px; top: 20px; color: #ffffff !important; box-shadow: none !important;
        background: linear-gradient(90deg, #5822c6 0%, #1a1580 100%) !important;
        font-size: 0.74rem; padding: 6px 14px; border-radius: 999px;
    }
    html body #quickBuyModal .qb-header { padding-right: 0 !important; padding-left: 96px; margin: 4px 0 20px; }
    html body #quickBuyModal .qb-header h3 { color: #ffffff; font-size: 0.85rem; font-weight: 700; }
    html body #quickBuyModal .qb-header i {
        background: transparent !important; border: none !important; width: auto; height: auto;
        color: #9a9dc0 !important; font-size: 1.05rem;
    }
    html body #quickBuyModal .qb-description { padding-right: 0 !important; padding-left: 96px; color: #b3b8e6; }
    html body #quickBuyModal .qb-field label { color: #b3b8e6; }
    html body #quickBuyModal .qb-field input, html body #quickBuyModal .qb-total-box {
        background: #3a3d75 !important; background-image: none !important; border: 1.5px solid transparent !important;
        border-radius: 999px; color: #ffffff;
    }
    html body #quickBuyModal .qb-field input::placeholder { color: #9a9dc0; }
    html body #quickBuyModal .qb-field input:focus { border-color: #7b3ff2 !important; box-shadow: 0 0 0 3px rgba(123,63,242,0.25) !important; }
    html body #quickBuyModal .qb-buy {
        background: linear-gradient(90deg, #5822c6 0%, #14106b 100%) !important; color: #ffffff;
        box-shadow: none !important; border-radius: 999px;
    }
    html body #quickBuyModal .qb-verify-btn { background: #3a3d75; color: #b3b8e6; font-weight: 600; }
    html body #quickBuyModal .qb-buy::before { display: none !important; }
    html body #quickBuyModal .qb-buy:hover { transform: none; box-shadow: none; filter: brightness(1.12); }
    html body #quickBuyModal .qb-cancel {
        border: 1.5px solid #e5334b !important; color: #e5334b !important; background: transparent !important; border-radius: 999px;
    }
    html body #quickBuyModal .qb-cancel:hover { background: rgba(229,51,75,0.1) !important; transform: none; }

    /* ===== 🧭 v27: لوحة التحكم بنفس الستايل (قائمة جانبية، إحصائيات، جداول، حقول) ===== */
    html body .admin-sidebar { background: #24274f; border: none; box-shadow: none; }
    html body .admin-sidebar a { color: #c9cdf3; }
    html body .admin-sidebar a:hover { background: rgba(255,255,255,0.06); color: #ffffff; }
    html body .admin-sidebar a.active { background: #5822c6; color: #ffffff; border-right-color: #1fc8b4; }
    html body .admin-sidebar .sidebar-title { color: #8f95c9; }
    html body .admin-sidebar::-webkit-scrollbar-thumb { background: #5822c6; }
    html body .admin-stat { background: #30346a; border: 1px solid rgba(255,255,255,0.07); box-shadow: none; }
    html body .admin-stat::before, html body .admin-stat::after { display: none; }
    html body .admin-stat:hover { transform: none; border-color: #7b3ff2; box-shadow: none; }
    html body .admin-stat .number { color: #ffffff; background: none; -webkit-text-fill-color: currentColor; }
    html body .cc-card, html body .cc-chip { background: #30346a; border-color: rgba(255,255,255,0.07); }
    html body .cc-chip.warn { background: rgba(229,51,75,0.16); border-color: #e5334b; }
    html body .cc-actions a { background: linear-gradient(135deg, #5822c6 0%, #7b3ff2 100%); color: #ffffff; }
    html body .admin-side-search { background: #363a73; }
    html body table th { background: #3a3d75; color: #ffffff; }
    html body table td { border-color: rgba(255,255,255,0.07); }
    html body table tr:hover td { background: rgba(255,255,255,0.03); }
    html body select, html body textarea, html body input[type="text"], html body input[type="number"], html body input[type="email"],
    html body input[type="password"], html body input[type="search"], html body input[type="url"], html body input[type="date"] {
        background-color: #363a73; color: #ffffff; border-color: rgba(255,255,255,0.10);
    }
    html body .admin-content .badge-success { background: rgba(31,200,180,0.18); color: #5eead4; }
    html body .admin-content .badge-pending { background: rgba(251,191,36,0.18); color: #fbbf24; }
    html body .admin-content .badge-danger { background: rgba(229,51,75,0.18); color: #ff6b81; }

    /* روابط وعناوين */
    html body a { color: inherit; }
    html body h1, html body h2, html body h3 { color: #ffffff; }

    /* =====================================================================================
       🪟 v58 — طبقة الزجاج (Glassmorphism) فوق ستايل "بنتاكون" — نفس الألوان (كحلي/بنفسجي/تركوازي)
       بدون تغيير أي HTML أو منطق؛ فقط سطح زجاجي شفاف + ضبابية + حركة ناعمة.
       لإلغاء الزجاج وحده: احذف هذه الكتلة (من هذا التعليق حتى تعليق نهايتها) أو ضع ui_style = classic لإرجاع الستايل القديم كله.
       ===================================================================================== */
    :root {
        --gl-ease: cubic-bezier(.22, 1, .36, 1);
        --gl-fill: linear-gradient(145deg, rgba(255,255,255,calc(.15 * var(--gl-k))) 0%, rgba(255,255,255,calc(.05 * var(--gl-k))) 100%);
        --gl-fill-strong: linear-gradient(145deg, rgba(255,255,255,calc(.20 * var(--gl-k))) 0%, rgba(255,255,255,calc(.07 * var(--gl-k))) 100%);
        --gl-line: rgba(255,255,255,.17);
        --gl-hi: inset 0 1px 0 rgba(255,255,255,.22);
        --gl-shadow: 0 10px 32px rgba(8,6,44,.38);
        --gl-violet: #7b3ff2; --gl-violet-soft: #a78bfa; --gl-teal: #1fc8b4;
        --gl-a: #7b3ff2; --gl-a-rgb: 123,63,242; --gl-d: #5822c6; --gl-d-rgb: 88,34,198; --gl-s: #a78bfa; --gl-s-rgb: 167,139,250; --gl-t: #1fc8b4; --gl-t-rgb: 31,200,180;
        --gl-bg0: var(--gl-bg0); --gl-bg1: var(--gl-bg1); --gl-bg2: var(--gl-bg2); --gl-bg3: var(--gl-bg3); --gl-k: 1;
    }
    html { background: var(--gl-bg0); scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }
    html body, html body[class] { background: transparent !important; background-image: none !important; }
    ::selection { background: rgba(var(--gl-a-rgb),.55); color: #fff; }
    * { scrollbar-width: thin; scrollbar-color: rgba(var(--gl-s-rgb),.45) transparent; }
    ::-webkit-scrollbar { width: 7px; height: 7px; }
    ::-webkit-scrollbar-thumb { background: rgba(var(--gl-s-rgb),.42); border-radius: 8px; }
    ::-webkit-scrollbar-track { background: transparent; }

    /* ---------- خلفية حيّة: توهّج بنفسجي/تركوازي ثابت + كُرات ناعمة تتحرك ببطء (transform فقط = خفيفة على الجوال) ---------- */
    html body::before {
        content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
        background:
            radial-gradient(60% 42% at 88% 6%,  rgba(var(--gl-a-rgb),.60), transparent 70%),
            radial-gradient(55% 38% at 6% 38%,  rgba(var(--gl-t-rgb),.26), transparent 72%),
            radial-gradient(70% 46% at 72% 98%, rgba(var(--gl-d-rgb),.50), transparent 72%),
            linear-gradient(180deg, var(--gl-bg1) 0%, var(--gl-bg2) 55%, var(--gl-bg3) 100%);
    }
    html body::after {
        content: ""; position: fixed; inset: -18%; z-index: -1; pointer-events: none;
        background:
            radial-gradient(circle at 28% 24%, rgba(var(--gl-s-rgb),.24), transparent 38%),
            radial-gradient(circle at 78% 68%, rgba(var(--gl-t-rgb),.18), transparent 36%),
            radial-gradient(circle at 46% 92%, rgba(var(--gl-a-rgb),.22), transparent 34%);
        animation: glDrift 30s ease-in-out infinite alternate; will-change: transform;
    }
    @keyframes glDrift {
        0%   { transform: translate3d(0,0,0) scale(1); }
        50%  { transform: translate3d(-3%, 2.5%, 0) scale(1.06); }
        100% { transform: translate3d(2.5%, -3%, 0) scale(1.02); }
    }

    /* ---------- حركات عامة ---------- */
    @keyframes glFade   { from { opacity: 0; } to { opacity: 1; } }
    @keyframes glPop    { from { opacity: 0; transform: translateY(26px) scale(.94); } to { opacity: 1; transform: translateY(0) scale(1); } }
    @keyframes glRise   { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
    @keyframes glSlide  { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: translateX(0); } }
    @keyframes glFloat  { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
    @keyframes glSpin   { to { transform: rotate(360deg); } }
    @keyframes glShine  { from { transform: translateX(-130%) skewX(-18deg); } to { transform: translateX(260%) skewX(-18deg); } }

    /* ---------- الهيدر: شريط بنفسجي زجاجي ---------- */
    html body .hs-header, html body .main-header {
        background: linear-gradient(135deg, rgba(var(--gl-d-rgb),.74) 0%, rgba(var(--gl-a-rgb),.50) 100%) !important;
        -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%);
        border-bottom: 1px solid rgba(255,255,255,.20) !important;
        box-shadow: 0 8px 30px rgba(20,10,70,.38), inset 0 1px 0 rgba(255,255,255,.22) !important;
    }
    html body .hs-balance {
        background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.26);
        -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--gl-hi);
    }
    html body #auth-btn-header {
        background: rgba(255,255,255,.20); color: #fff; border: 1px solid rgba(255,255,255,.38);
        -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--gl-hi);
        transition: transform .3s var(--gl-ease), background .3s ease, box-shadow .3s ease;
    }
    html body #auth-btn-header:hover { background: rgba(255,255,255,.30); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(20,10,70,.35), var(--gl-hi); }
    html body #auth-btn-header:active { transform: scale(.96); }
    html body .hs-icon-btn { border-radius: 12px; transition: background .25s ease, transform .25s var(--gl-ease); }
    html body .hs-icon-btn:active { transform: scale(.9); }
    html body .hs-vip-btn { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--gl-hi); }

    /* ---------- البحث + الحقول: زجاج ---------- */
    html body .hs-search-wrap .form-control, html body .form-control {
        background: rgba(255,255,255,.10) !important; border: 1px solid rgba(255,255,255,.18) !important; color: #fff !important;
        -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--gl-hi);
        transition: border-color .3s ease, box-shadow .3s ease, background .3s ease;
    }
    html body .form-control:focus {
        background: rgba(255,255,255,.15) !important; border-color: rgba(var(--gl-s-rgb),.85) !important;
        box-shadow: 0 0 0 4px rgba(var(--gl-a-rgb),.26), 0 8px 24px rgba(var(--gl-d-rgb),.25) !important;
    }
    html body select, html body textarea, html body input[type="text"], html body input[type="number"], html body input[type="email"],
    html body input[type="password"], html body input[type="search"], html body input[type="url"], html body input[type="date"],
    html body input[type="tel"] {
        background-color: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.18); color: #fff;
        transition: border-color .3s ease, box-shadow .3s ease, background-color .3s ease;
    }
    html body select:focus, html body textarea:focus, html body input[type="text"]:focus, html body input[type="number"]:focus,
    html body input[type="email"]:focus, html body input[type="password"]:focus, html body input[type="search"]:focus,
    html body input[type="url"]:focus, html body input[type="date"]:focus, html body input[type="tel"]:focus {
        outline: none; background-color: rgba(255,255,255,.14); border-color: rgba(var(--gl-s-rgb),.85);
        box-shadow: 0 0 0 4px rgba(var(--gl-a-rgb),.24);
    }
    html body select option { background: #2f3270; color: #fff; }
    html body input:-webkit-autofill, html body input:-webkit-autofill:focus, html body textarea:-webkit-autofill {
        -webkit-text-fill-color: #fff; caret-color: #fff;
        -webkit-box-shadow: 0 0 0 1000px rgba(62,57,134,.96) inset !important; box-shadow: 0 0 0 1000px rgba(62,57,134,.96) inset !important;
        transition: background-color 9999s ease-out 0s;
    }
    html body input[type="checkbox"], html body input[type="radio"] { accent-color: var(--gl-a); }

    /* ---------- بطاقات الشبكة الرئيسية (أيقونات الألعاب): زجاج خفيف بدون blur (آلاف العناصر = أداء) ---------- */
    html body .hs-card { transition: transform .35s var(--gl-ease); }
    html body .hs-card-icon {
        position: relative; overflow: hidden; background: var(--gl-fill) !important;
        border: 1px solid var(--gl-line) !important;
        box-shadow: var(--gl-hi), 0 8px 20px rgba(8,6,44,.32);
        transition: transform .35s var(--gl-ease), box-shadow .35s ease, border-color .35s ease;
    }
    html body .hs-card-icon::after {
        content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
        background: linear-gradient(135deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,.05) 38%, transparent 55%);
    }
    html body .hs-card:active .hs-card-icon { transform: scale(.93); }
    @media (hover: hover) {
        html body .hs-card:hover .hs-card-icon { transform: translateY(-4px) scale(1.04); border-color: rgba(255,255,255,.34) !important; box-shadow: var(--gl-hi), 0 16px 30px rgba(var(--gl-d-rgb),.45); }
    }
    html body .hs-card .hs-maint-badge { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

    /* ---------- باقي الأسطح: بطاقات/محفظة/طلبات/دفع/إدارة ---------- */
    html body .card, html body .admin-card, html body .wallet-balance, html body .order-item, html body .dm-card,
    html body .payment-method-card, html body .cc-card, html body .cc-chip, html body .admin-stat, html body .maint-card,
    html body .category-card {
        background: var(--gl-fill); border: 1px solid var(--gl-line); border-radius: 20px;
        -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
        box-shadow: var(--gl-hi), var(--gl-shadow);
        transition: transform .35s var(--gl-ease), border-color .3s ease, box-shadow .35s ease, background .3s ease;
    }
    html body .category-card { -webkit-backdrop-filter: none; backdrop-filter: none; overflow: hidden; }
    html body .wallet-balance { background: linear-gradient(145deg, rgba(var(--gl-a-rgb),.34) 0%, rgba(255,255,255,.07) 100%); }
    html body .wallet-balance .amount { text-shadow: 0 0 28px rgba(var(--gl-t-rgb),.45); }
    html body .dm-header { background: linear-gradient(135deg, rgba(var(--gl-a-rgb),.30), rgba(255,255,255,.06)); border: 1px solid var(--gl-line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
    html body .order-item { border-radius: 16px; }
    @media (hover: hover) {
        html body .order-item:hover, html body .payment-method-card:hover, html body .category-card:hover {
            transform: translateY(-3px); border-color: rgba(var(--gl-s-rgb),.6);
            box-shadow: var(--gl-hi), 0 18px 38px rgba(var(--gl-d-rgb),.38);
        }
    }
    html body .payment-method-card:active, html body .order-item:active, html body .category-card:active { transform: scale(.98); }
    html body .admin-stat:hover { transform: translateY(-2px); }

    /* ---------- المنتجات/الباقات ---------- */
    html body .product-item .product-image, html body .subcategory-card-img {
        background: var(--gl-fill) !important; border: 1px solid var(--gl-line);
        box-shadow: var(--gl-hi), 0 8px 18px rgba(8,6,44,.28);
        transition: transform .35s var(--gl-ease), box-shadow .35s ease, border-color .3s ease;
    }
    html body .product-item { transition: transform .3s var(--gl-ease); }
    html body .product-item:active, html body .subcategory-card:active { transform: scale(.95) !important; }
    @media (hover: hover) {
        html body .product-item:hover .product-image, html body .subcategory-card:hover .subcategory-card-img {
            transform: translateY(-3px); border-color: rgba(var(--gl-s-rgb),.65); box-shadow: var(--gl-hi), 0 14px 26px rgba(var(--gl-d-rgb),.42);
        }
    }
    html body .featured-badge { box-shadow: 0 4px 12px rgba(229,51,75,.45); }

    /* ---------- البانر والشريط المتحرك ---------- */
    html body .banner-slider { border: 1px solid var(--gl-line); box-shadow: var(--gl-hi), 0 18px 40px rgba(8,6,44,.45); }
    html body .ticker {
        background: var(--gl-fill); border: 1px solid var(--gl-line); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
        box-shadow: var(--gl-hi), 0 6px 18px rgba(8,6,44,.28);
    }
    html body .ticker::before { background: linear-gradient(90deg, rgba(41,44,94,.9), transparent); }
    html body .ticker::after  { background: linear-gradient(270deg, rgba(41,44,94,.9), transparent); }
    html body .ticker-item:not(:first-child) { border-right-color: rgba(255,255,255,.2); }

    /* ---------- الأزرار ---------- */
    html body .btn-gold, html body .btn-gold-full, html body button[type="submit"], html body .hs-submit-btn {
        position: relative; overflow: hidden;
        background: linear-gradient(135deg, rgba(var(--gl-d-rgb),.95) 0%, rgba(var(--gl-a-rgb),.92) 60%, rgba(155,107,255,.9) 100%);
        border: 1px solid rgba(255,255,255,.28); color: #fff;
        box-shadow: 0 10px 26px rgba(var(--gl-d-rgb),.48), inset 0 1px 0 rgba(255,255,255,.38);
        transition: transform .3s var(--gl-ease), box-shadow .3s ease, filter .3s ease;
    }
    html body .btn-gold::after, html body .btn-gold-full::after, html body button[type="submit"]::after, html body .hs-submit-btn::after {
        content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 38%; pointer-events: none;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent); transform: translateX(-130%) skewX(-18deg);
    }
    @media (hover: hover) {
        html body .btn-gold:hover, html body .btn-gold-full:hover, html body button[type="submit"]:hover, html body .hs-submit-btn:hover {
            transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 16px 34px rgba(var(--gl-d-rgb),.6), inset 0 1px 0 rgba(255,255,255,.45);
        }
        html body .btn-gold:hover::after, html body .btn-gold-full:hover::after, html body button[type="submit"]:hover::after, html body .hs-submit-btn:hover::after {
            animation: glShine .85s ease;
        }
    }
    html body .btn-gold:active, html body .btn-gold-full:active, html body button[type="submit"]:active, html body .hs-submit-btn:active {
        transform: scale(.97); filter: brightness(.96);
    }
    html body .btn-danger { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: transform .3s var(--gl-ease), box-shadow .3s ease; }
    html body .btn-danger:active { transform: scale(.97); }

    /* ---------- الشريط السفلي: زجاج بنفسجي ---------- */
    html body .hs-bottom-nav {
        background: linear-gradient(90deg, rgba(53,48,154,.74) 0%, rgba(var(--gl-d-rgb),.66) 55%, rgba(var(--gl-a-rgb),.58) 100%) !important;
        background-image: linear-gradient(90deg, rgba(53,48,154,.74) 0%, rgba(var(--gl-d-rgb),.66) 55%, rgba(var(--gl-a-rgb),.58) 100%) !important;
        -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%);
        border-top: 1px solid rgba(255,255,255,.22); border-radius: 20px 20px 0 0;
        box-shadow: 0 -10px 34px rgba(10,8,50,.45), inset 0 1px 0 rgba(255,255,255,.22);
    }
    html body .hs-nav-icon { transition: transform .3s var(--gl-ease), color .25s ease; }
    html body .hs-nav-icon::before { transition: transform .4s var(--gl-ease), opacity .3s ease; box-shadow: 0 0 20px rgba(var(--gl-t-rgb),.55); }
    html body .hs-nav-icon:active { transform: scale(.88); }
    html body .hs-home-btn { transition: transform .3s var(--gl-ease); }
    html body .hs-home-btn:active { transform: scale(.88); }

    /* ---------- القائمة الجانبية ---------- */
    html body #overlay { background: rgba(10,8,44,.48); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); }
    html body #overlay[style*="block"], html body #overlay.active, html body #overlay.show { animation: glFade .3s ease; }
    html body .side-nav {
        background: linear-gradient(180deg, rgba(48,44,112,.78) 0%, rgba(30,33,82,.88) 100%) !important;
        -webkit-backdrop-filter: blur(26px) saturate(160%); backdrop-filter: blur(26px) saturate(160%);
        border-left: 1px solid rgba(255,255,255,.16); box-shadow: -14px 0 50px rgba(8,6,44,.5), inset 1px 0 0 rgba(255,255,255,.1);
        transition: right .5s var(--gl-ease);
    }
    html body .side-nav a { border-radius: 14px; transition: background .25s ease, color .25s ease, transform .3s var(--gl-ease); }
    html body .side-nav a:hover { background: rgba(255,255,255,.10); color: #fff; transform: translateX(-3px); }
    html body .side-nav a:active { transform: scale(.97); }
    html body .side-nav .user-profile .avatar { box-shadow: 0 0 0 3px rgba(255,255,255,.18), 0 0 26px rgba(var(--gl-s-rgb),.5); }
    html body .side-nav-currency { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); border-radius: 14px; }
    html body .side-nav-currency-options { background: rgba(36,39,90,.96); }
    html body .side-nav .close-btn { transition: transform .35s var(--gl-ease), color .25s ease; }

    /* ---------- النوافذ المنبثقة (كل المودالات): خلفية ضبابية + صندوق زجاجي + دخول زنبركي ---------- */
    html body .modal-overlay, html body .popup-overlay {
        background: radial-gradient(80% 60% at 50% 40%, rgba(60,40,140,.40), rgba(12,10,44,.66)) !important;
        -webkit-backdrop-filter: blur(14px) saturate(140%) !important; backdrop-filter: blur(14px) saturate(140%) !important;
        overscroll-behavior: contain;
    }
    html body .modal-overlay.active, html body .popup-overlay.active { animation: glFade .28s ease both; }
    html body .modal-box, html body .popup-box {
        background: linear-gradient(145deg, rgba(255,255,255,.19) 0%, rgba(255,255,255,.07) 100%), rgba(41,44,94,.58);
        border: 1px solid rgba(255,255,255,.24); border-radius: 26px;
        box-shadow: 0 30px 80px rgba(6,4,40,.55), 0 0 60px -12px rgba(var(--gl-a-rgb),.5), inset 0 1px 0 rgba(255,255,255,.28);
        animation: glPop .5s var(--gl-ease) both; overscroll-behavior: contain;
    }
    html body .modal-box h3 { color: #fff; }
    html body .modal-box .close-modal, html body .popup-box .popup-close {
        width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; font-size: 1.3rem;
        border-radius: 50%; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.2); color: #e6e8ff;
        transition: transform .35s var(--gl-ease), background .25s ease, color .25s ease;
    }
    html body .modal-box .close-modal:hover, html body .popup-box .popup-close:hover { background: rgba(229,51,75,.85); color: #fff; transform: rotate(90deg); }

    /* ---------- نافذة الشراء السريع ---------- */
    html body #quickBuyModal .qb-box {
        background: linear-gradient(145deg, rgba(255,255,255,.19) 0%, rgba(255,255,255,.07) 100%), rgba(41,44,94,.60) !important;
        border: 1px solid rgba(255,255,255,.24) !important; border-radius: 26px !important;
        box-shadow: 0 30px 80px rgba(6,4,40,.55), 0 0 60px -12px rgba(var(--gl-a-rgb),.5), inset 0 1px 0 rgba(255,255,255,.28) !important;
        animation: glPop .5s var(--gl-ease) both;
    }
    html body #quickBuyModal .qb-price-badge {
        background: linear-gradient(90deg, rgba(var(--gl-d-rgb),.95), rgba(var(--gl-a-rgb),.85)) !important;
        border: 1px solid rgba(255,255,255,.28); box-shadow: 0 6px 16px rgba(var(--gl-d-rgb),.45), inset 0 1px 0 rgba(255,255,255,.3) !important;
    }
    html body #quickBuyModal .qb-field input, html body #quickBuyModal .qb-total-box {
        background: rgba(255,255,255,.10) !important; border: 1px solid rgba(255,255,255,.2) !important; box-shadow: var(--gl-hi);
        transition: border-color .3s ease, box-shadow .3s ease, background .3s ease;
    }
    html body #quickBuyModal .qb-field input:focus { background: rgba(255,255,255,.15) !important; border-color: rgba(var(--gl-s-rgb),.85) !important; box-shadow: 0 0 0 4px rgba(var(--gl-a-rgb),.26) !important; }
    html body #quickBuyModal .qb-buy {
        background: linear-gradient(135deg, rgba(var(--gl-d-rgb),.95), rgba(var(--gl-a-rgb),.92) 60%, rgba(155,107,255,.9)) !important;
        border: 1px solid rgba(255,255,255,.28) !important; box-shadow: 0 10px 26px rgba(var(--gl-d-rgb),.5), inset 0 1px 0 rgba(255,255,255,.38) !important;
        transition: transform .3s var(--gl-ease), filter .3s ease;
    }
    html body #quickBuyModal .qb-buy:active { transform: scale(.97); }
    html body #quickBuyModal .qb-verify-btn { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); color: #e6e8ff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
    html body #quickBuyModal .qb-cancel { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); background: rgba(229,51,75,.08) !important; transition: background .25s ease, transform .3s var(--gl-ease); }
    html body #quickBuyModal .qb-cancel:active { transform: scale(.97); }

    /* ---------- 🔐 تسجيل الدخول / إنشاء حساب: التجربة الأهم — زجاج + انتقالات سلسة ---------- */
    html body #hsAuthModal .modal-box {
        max-width: 410px; padding: 26px 24px 22px; text-align: center;
        background: radial-gradient(circle at 88% -6%, rgba(var(--gl-s-rgb),.40), transparent 46%),
                    linear-gradient(145deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.06) 100%), rgba(41,44,94,.56);
        border: 1px solid rgba(255,255,255,.26); border-radius: 28px;
        box-shadow: 0 34px 90px rgba(6,4,40,.6), 0 0 70px -10px rgba(var(--gl-a-rgb),.55), inset 0 1px 0 rgba(255,255,255,.3);
    }
    html body #hsAuthModal .modal-box { position: relative; }
    html body #hsAuthModal .close-modal { position: absolute; top: 14px; left: 14px; float: none; z-index: 2; }
    html body .hs-auth-header { margin: 4px 0 16px; position: relative; }
    html body .hs-auth-header img {
        width: 64px; height: 64px; border: 1px solid rgba(255,255,255,.35);
        box-shadow: 0 0 0 5px rgba(255,255,255,.10), 0 10px 30px rgba(var(--gl-a-rgb),.6), 0 0 34px rgba(var(--gl-s-rgb),.5);
        animation: glFloat 5s ease-in-out infinite;
    }
    html body .hs-auth-header h3 {
        font-size: 1.3rem; font-weight: 800; transition: opacity .25s ease;
        background: linear-gradient(90deg, #ffffff 0%, #d4c6ff 100%); -webkit-background-clip: text; background-clip: text;
        -webkit-text-fill-color: transparent; color: transparent;
    }
    html body .hs-auth-header p { color: #c9cdf3; transition: opacity .25s ease; }

    /* تبويبات حبّة زجاجية بمؤشّر ينزلق بين "تسجيل الدخول" و"إنشاء حساب" */
    html body .hs-auth-tabs {
        position: relative; display: flex; justify-content: stretch; gap: 0; padding: 4px; margin: 0 0 18px; overflow: hidden;
        background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: 16px;
        box-shadow: inset 0 2px 8px rgba(6,4,40,.28);
    }
    html body .hs-auth-tabs::before {
        content: ""; position: absolute; top: 4px; bottom: 4px; inset-inline-start: 4px; width: calc(50% - 4px); border-radius: 12px;
        background: linear-gradient(135deg, var(--gl-d) 0%, var(--gl-a) 100%);
        border: 1px solid rgba(255,255,255,.28); box-shadow: 0 6px 18px rgba(var(--gl-d-rgb),.55), inset 0 1px 0 rgba(255,255,255,.35);
        transition: inset-inline-start .5s var(--gl-ease);
    }
    html body .hs-auth-tabs:has(#hs-tab-register.active)::before { inset-inline-start: 50%; }
    html body .hs-auth-tab {
        position: relative; z-index: 1; flex: 1; text-align: center; padding: 11px 6px; border: none !important; border-radius: 12px;
        color: #b3b8e6; font-weight: 700; font-size: .92rem; transition: color .35s ease, transform .3s var(--gl-ease);
        user-select: none; -webkit-user-select: none;
    }
    html body .hs-auth-tab:active { transform: scale(.95); }
    html body .hs-auth-tab.active { color: #fff; }
    @supports not selector(:has(*)) {
        html body .hs-auth-tabs::before { display: none; }
        html body .hs-auth-tab.active { background: linear-gradient(135deg, var(--gl-d), var(--gl-a)); box-shadow: 0 6px 18px rgba(var(--gl-d-rgb),.5); }
    }

    /* النماذج: دخول متدرّج للحقول (واحداً بعد الآخر) عند فتح/تبديل التبويب */
    html body .hs-auth-form { gap: 13px; margin-top: 0; }
    html body .hs-auth-form.active { animation: glSlide .5s var(--gl-ease) both; }
    html body .hs-auth-form.active > :nth-child(2) { animation: glRise .55s var(--gl-ease) .04s backwards; }
    html body .hs-auth-form.active > :nth-child(3) { animation: glRise .55s var(--gl-ease) .09s backwards; }
    html body .hs-auth-form.active > :nth-child(4) { animation: glRise .55s var(--gl-ease) .14s backwards; }
    html body .hs-auth-form.active > :nth-child(5) { animation: glRise .55s var(--gl-ease) .19s backwards; }
    html body .hs-auth-form.active > :nth-child(6) { animation: glRise .55s var(--gl-ease) .24s backwards; }
    html body .hs-auth-form.active > :nth-child(n+7) { animation: glRise .55s var(--gl-ease) .29s backwards; }
    html body .hs-auth-form input:not([type="checkbox"]), html body .hs-auth-form textarea {
        width: 100%; box-sizing: border-box; min-height: 50px; padding: 13px 14px; font-size: 15px; color: #fff; border-radius: 15px;
        background: rgba(255,255,255,.09) !important; border: 1px solid rgba(255,255,255,.2) !important;
        -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--gl-hi);
        transition: border-color .3s ease, box-shadow .35s ease, background .3s ease, transform .3s var(--gl-ease);
    }
    html body .hs-auth-form input::placeholder, html body .hs-auth-form textarea::placeholder { color: rgba(214,218,250,.62); transition: opacity .25s ease, transform .3s var(--gl-ease); }
    html body .hs-auth-form input:focus::placeholder { opacity: .35; transform: translateX(-4px); }
    html body .hs-auth-form input:not([type="checkbox"]):focus, html body .hs-auth-form textarea:focus {
        outline: none; background: rgba(255,255,255,.15) !important; border-color: rgba(var(--gl-s-rgb),.9) !important;
        box-shadow: 0 0 0 4px rgba(var(--gl-a-rgb),.28), 0 10px 26px rgba(var(--gl-d-rgb),.28) !important; transform: translateY(-1px);
    }
    html body .hs-input-wrap input { padding-right: 44px !important; }
    html body .hs-input-wrap:has(.hs-pw-toggle) input { padding-left: 46px !important; }
    html body .hs-input-wrap > i.hs-input-icon { right: 16px; color: #aab0e0; transition: color .3s ease, transform .35s var(--gl-ease); }
    html body .hs-input-wrap input:focus ~ i.hs-input-icon { color: #c4b5fd; transform: translateY(-50%) scale(1.15); }
    html body .hs-input-wrap input:not(:placeholder-shown) ~ i.hs-input-icon { color: #c4b5fd; }
    html body .hs-input-wrap .hs-pw-toggle {
        left: 8px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 10px;
        color: #aab0e0; transition: background .25s ease, color .25s ease, transform .3s var(--gl-ease);
    }
    html body .hs-input-wrap .hs-pw-toggle:hover { background: rgba(255,255,255,.12); color: #fff; }
    html body .hs-input-wrap .hs-pw-toggle:active { transform: translateY(-50%) scale(.85); }
    html body .hs-auth-form input:user-invalid { border-color: rgba(255,107,129,.75) !important; box-shadow: 0 0 0 4px rgba(229,51,75,.18) !important; }
    html body .hs-auth-form label { color: #c9cdf3; font-size: .8rem; line-height: 1.6; }
    html body .hs-auth-form label a { color: #c4b5fd !important; text-decoration: underline; text-underline-offset: 3px; }
    html body .hs-submit-btn { min-height: 52px; margin-top: 4px; border-radius: 16px; font-size: 1rem; font-weight: 800; letter-spacing: .2px; cursor: pointer; }
    html body .hs-submit-btn.is-loading { pointer-events: none; filter: brightness(.92); }
    html body .hs-submit-btn.is-loading::before {
        content: ""; display: inline-block; width: 16px; height: 16px; margin-inline-end: 9px; vertical-align: -3px; border-radius: 50%;
        border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; animation: glSpin .7s linear infinite;
    }
    html body .hs-auth-divider { display: flex; align-items: center; gap: 12px; color: #aab0e0; margin: 14px 0 10px; }
    html body .hs-auth-divider::before, html body .hs-auth-divider::after {
        content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
    }
    html body .hs-google-btn {
        min-height: 50px; border-radius: 15px; color: #fff; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.2);
        -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--gl-hi);
        transition: background .3s ease, border-color .3s ease, transform .3s var(--gl-ease), box-shadow .3s ease;
    }
    html body .hs-google-btn:hover { background: rgba(255,255,255,.17); border-color: rgba(255,255,255,.34); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(8,6,44,.35), var(--gl-hi); }
    html body .hs-google-btn:active { transform: scale(.97); }
    html body #hs-forgot-pw-row a { color: #b3b8e6 !important; transition: color .25s ease; }
    html body #hs-forgot-pw-row a:hover { color: #fff !important; }

    /* ---------- الدردشة (الدعم) ---------- */
    html body #supportChatBubble {
        background: linear-gradient(135deg, var(--gl-d), var(--gl-a)) !important; border: 1px solid rgba(255,255,255,.3);
        box-shadow: 0 10px 28px rgba(var(--gl-d-rgb),.6), inset 0 1px 0 rgba(255,255,255,.35); color: #fff;
        transition: transform .35s var(--gl-ease), box-shadow .3s ease;
    }
    html body #supportChatBubble:active { transform: scale(.9); }
    html body #supportChatWindow {
        background: linear-gradient(145deg, rgba(255,255,255,.17), rgba(255,255,255,.05)), rgba(41,44,94,.66) !important;
        -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%);
        border: 1px solid rgba(255,255,255,.24) !important; border-radius: 24px !important; overflow: hidden;
        box-shadow: 0 26px 70px rgba(6,4,40,.55), inset 0 1px 0 rgba(255,255,255,.26);
    }
    html body #supportChatWindow.open { animation: glPop .45s var(--gl-ease) both; }
    html body #supportChatWindow .sc-head { background: linear-gradient(135deg, rgba(var(--gl-d-rgb),.9), rgba(var(--gl-a-rgb),.7)) !important; color: #fff !important; border-bottom: 1px solid rgba(255,255,255,.2); }
    html body #supportChatWindow .sc-head button { color: #fff !important; }
    html body #supportChatBody .sc-msg { animation: glRise .35s var(--gl-ease) backwards; }
    html body #supportChatBody .sc-msg.user { background: linear-gradient(135deg, var(--gl-d), var(--gl-a)); color: #fff; box-shadow: 0 6px 16px rgba(var(--gl-d-rgb),.4); }
    html body #supportChatBody .sc-msg.assistant { background: rgba(255,255,255,.10); color: #fff; border: 1px solid rgba(255,255,255,.18); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
    html body #supportChatWindow .sc-input-row { border-top: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); }
    html body #supportChatWindow .sc-input-row textarea { background: rgba(255,255,255,.10) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.2) !important; }

    /* ---------- تنبيهات/رسائل الفلاش/جداول/لوحة التحكم ---------- */
    html body .flash-success, html body .flash-danger, html body .flash-info, html body .alert-bar {
        -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.2);
        border-radius: 16px; box-shadow: var(--gl-hi), 0 8px 24px rgba(8,6,44,.3); animation: glRise .5s var(--gl-ease) backwards;
    }
    html body .flash-success { background: linear-gradient(135deg, rgba(var(--gl-t-rgb),.30), rgba(var(--gl-t-rgb),.10)); }
    html body .flash-danger  { background: linear-gradient(135deg, rgba(229,51,75,.32), rgba(229,51,75,.10)); }
    html body .flash-info    { background: linear-gradient(135deg, rgba(var(--gl-a-rgb),.34), rgba(var(--gl-a-rgb),.10)); }
    html body .table-responsive { background: var(--gl-fill); border: 1px solid var(--gl-line); border-radius: 18px; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--gl-hi), var(--gl-shadow); overflow-x: auto; }
    html body table th { background: rgba(255,255,255,.10); }
    html body table tr { transition: background .25s ease; }
    html body .badge { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
    html body .admin-sidebar {
        background: linear-gradient(180deg, rgba(48,44,112,.72), rgba(30,33,82,.86)); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
        border-left: 1px solid rgba(255,255,255,.14); box-shadow: var(--gl-hi), var(--gl-shadow);
    }
    html body .admin-sidebar a { border-radius: 12px; transition: background .25s ease, color .25s ease, transform .3s var(--gl-ease); }
    html body .admin-sidebar a.active { background: linear-gradient(135deg, rgba(var(--gl-d-rgb),.9), rgba(var(--gl-a-rgb),.7)); box-shadow: 0 6px 18px rgba(var(--gl-d-rgb),.45), inset 0 1px 0 rgba(255,255,255,.3); }
    html body .site-footer { opacity: .9; }

    /* ---------- دخول ناعم لمحتوى الصفحات (يتدرّج لأول 12 عنصراً فقط) ---------- */
    html body .hs-grid-container > *, html body .products-grid > *, html body .subcategory-grid > *, html body .category-grid > *,
    html body .payment-methods-grid > *, html body .admin-stats > *, html body .wallet-container > *, html body .order-item {
        animation: glRise .6s var(--gl-ease) backwards;
    }
    html body .hs-grid-container > :nth-child(2), html body .products-grid > :nth-child(2), html body .subcategory-grid > :nth-child(2), html body .category-grid > :nth-child(2), html body .payment-methods-grid > :nth-child(2), html body .wallet-container > :nth-child(2) { animation-delay: .04s; }
    html body .hs-grid-container > :nth-child(3), html body .products-grid > :nth-child(3), html body .subcategory-grid > :nth-child(3), html body .category-grid > :nth-child(3), html body .payment-methods-grid > :nth-child(3), html body .wallet-container > :nth-child(3) { animation-delay: .08s; }
    html body .hs-grid-container > :nth-child(4), html body .products-grid > :nth-child(4), html body .subcategory-grid > :nth-child(4), html body .category-grid > :nth-child(4), html body .payment-methods-grid > :nth-child(4), html body .wallet-container > :nth-child(4) { animation-delay: .12s; }
    html body .hs-grid-container > :nth-child(5), html body .products-grid > :nth-child(5), html body .subcategory-grid > :nth-child(5), html body .category-grid > :nth-child(5), html body .payment-methods-grid > :nth-child(5), html body .wallet-container > :nth-child(5) { animation-delay: .16s; }
    html body .hs-grid-container > :nth-child(6), html body .products-grid > :nth-child(6), html body .subcategory-grid > :nth-child(6), html body .category-grid > :nth-child(6), html body .payment-methods-grid > :nth-child(6), html body .wallet-container > :nth-child(6) { animation-delay: .20s; }
    html body .hs-grid-container > :nth-child(n+7), html body .products-grid > :nth-child(n+7), html body .subcategory-grid > :nth-child(n+7), html body .category-grid > :nth-child(n+7), html body .payment-methods-grid > :nth-child(n+7) { animation-delay: .24s; }
    html body .hs-grid-container > :nth-child(n+13), html body .products-grid > :nth-child(n+13), html body .subcategory-grid > :nth-child(n+13) { animation: none; }

    /* ---------- انتقال ناعم بين الصفحات (متصفحات تدعم View Transitions؛ غيرها يتجاهله بصمت) ---------- */
    @media (prefers-reduced-motion: no-preference) {
        @view-transition { navigation: auto; }
        ::view-transition-old(root) { animation: glFade .22s ease reverse both; }
        ::view-transition-new(root) { animation: glFade .32s ease both; }
    }

    /* ---------- بدون blur لو المتصفح لا يدعمه: ألوان معبّأة بدل الشفافية ---------- */
    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
        html body .hs-header, html body .main-header { background: var(--gl-d) !important; }
        html body .hs-bottom-nav { background: #4a2bb8 !important; background-image: none !important; }
        html body .side-nav, html body .admin-sidebar { background: #24274f !important; }
        html body .modal-box, html body .popup-box, html body #quickBuyModal .qb-box, html body #hsAuthModal .modal-box, html body #supportChatWindow { background: #30346a !important; }
        html body .card, html body .admin-card, html body .wallet-balance, html body .order-item, html body .dm-card, html body .payment-method-card, html body .table-responsive { background: #30346a; }
    }

    /* ---------- احترام إعداد "تقليل الحركة" في الجهاز ---------- */
    @media (prefers-reduced-motion: reduce) {
        html { scroll-behavior: auto; }
        html body::after { animation: none; }
        html body *, html body *::before, html body *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
    }
    /* ===== نهاية طبقة الزجاج v58 ===== */
    
    /* ===== 🖼️ طارة القالب المختار (3 قوالب عامة + قالب حصري بترخيص من المبرمج) ===== */
            /* ===== 🖼️ طارة القالب المختار: الأسطوري الماسي 💎 ===== */
        :root {
            --frame-c1: #00e5ff;
            --frame-c2: #ff00e5;
        }
        .hs-header, header.app-header, .header {
            box-shadow: inset 0 -3px 0 var(--frame-c1), inset 0 3px 0 var(--frame-c1);
        }
        .product-item, .subcategory-card, .admin-card, .card {
            border: 1.5px solid var(--frame-c1) !important;
            box-shadow: 0 0 0 1px color-mix(in srgb, var(--frame-c2) 25%, transparent), var(--shadow);
        }
                /* ===== طارة أسطورية متحركة متدرجة الألوان (حصري) ===== */
        .product-item, .subcategory-card, .admin-card, .card {
            border: none !important;
            position: relative;
            background-clip: padding-box;
        }
        .product-item::before, .subcategory-card::before, .admin-card::before, .card::before {
            content: "";
            position: absolute; inset: -2px;
            border-radius: inherit;
            padding: 2px;
            background: linear-gradient(120deg, var(--frame-c1), var(--frame-c2), var(--frame-c1));
            background-size: 200% 200%;
            animation: hsLegendaryFrame 4s ease infinite;
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            pointer-events: none;
            z-index: 1;
        }
        @keyframes hsLegendaryFrame {
            0%   { background-position: 0% 50%; }
            50%  { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
            
    /* ===== 🎨 ستايل عام إضافي (حر) يضيفه المدير من لوحة التحكم — يُطبَّق على كل صفحات المتجر ===== */