/* css/header.css - النسخة الأحدث */

:root {
    --bg-body: var(--site-bg, #ffffff);
    --bg-side: var(--section-bg, #ffffff);
    --bg-card: var(--card-bg, #ffffff);
    --text-main: var(--text-color, #333333);
    --text-muted-main: var(--muted-text-color, #64748b);
    --border-color: var(--border-color, #eeeeee);
    --header-color: var(--main-color, #2ecc71);
    --button-color: var(--auth-color, var(--main-color, #2ecc71));
    --active-bg: rgba(0,0,0,0.055);
    --hover-bg: rgba(0,0,0,0.035);
    --header-height: 57px;
    --desktop-sidebar-width: 285px; /* تم تكبير العرض للكمبيوتر كما طلبت */
}
[data-theme="dark"] {
    --bg-body: var(--site-bg, #0c1719);
    --bg-side: var(--section-bg, #122124);
    --bg-card: var(--card-bg, #16282c);
    --text-main: var(--text-color, #ffffff);
    --text-muted-main: var(--muted-text-color, #94a3b8);
    --border-color: var(--border-color, #1a2f34);
    --active-bg: var(--sidebar-active-bg, rgba(255,255,255,0.08));
    --hover-bg: color-mix(in srgb, var(--text-color, #ffffff) 7%, transparent);
}

body { 
    background-color: var(--bg-body) !important; 
    color: var(--text-main) !important; 
    transition: background-color 0.3s ease, color 0.3s ease, padding-right 0.28s ease; 
    padding-top: var(--header-height); 
    font-family: 'Tajawal', sans-serif; 
}

/* =========================================
   --- القائمة الجانبية (Sidebar) --- 
   ========================================= */
.side-nav { 
    background-color: var(--bg-side) !important; 
    color: var(--text-main) !important; 
    width: var(--desktop-sidebar-width); 
    position: fixed; 
    top: 0; 
    right: calc(-1 * var(--desktop-sidebar-width)); 
    height: 100dvh; 
    z-index: 9999999 !important; 
    transition: 0.3s ease; 
    overflow-y: auto; 
    display: flex; 
    flex-direction: column; 
    justify-content: flex-start !important;
    align-content: flex-start !important;
    box-shadow: none !important;
    border-left: 1px solid #e5e7eb !important;
    border-left-color: color-mix(in srgb, var(--border-color, #e5e7eb) 82%, #9ca3af) !important;
    border-right: none !important;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* إخفاء شريط التمرير بالكامل */
.side-nav::-webkit-scrollbar,
.neo-sidebar-frame::-webkit-scrollbar { 
    display: none !important; 
}

/* 🚀 حل جذري لمشكلة عدم ظهور القائمة في الوضع الداكن على الموبايل 🚀 */
.side-nav.open,
[data-theme="dark"] .side-nav.open,
body.dark-mode .side-nav.open,
body.dark-theme .side-nav.open,
body.theme-dark .side-nav.open { 
    right: 0 !important; 
}

[data-theme="dark"] .side-nav,
body.dark-mode .side-nav,
body.dark-theme .side-nav,
body.theme-dark .side-nav {
    border-left-color: #334155 !important;
}

.login-section-sidebar {
    padding: 20px 15px;
    margin: 10px;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
}
.login-section-sidebar h3 { font-size: 1.1rem; font-weight: 500; margin-bottom: 5px; }
.login-section-sidebar p { font-size: 0.8rem; opacity: 0.8; margin-bottom: 15px; }

.btn-green-sidebar {
    display: flex !important; align-items: center !important; justify-content: center !important;
    width: 100% !important; background-color: var(--button-color, #2ecc71) !important;
    color: #ffffff !important; text-decoration: none !important; border-radius: 50px !important; 
    padding: 8px 20px !important; font-weight: 500 !important; font-size: 0.85rem !important; 
    letter-spacing: 1px !important; transition: 0.3s !important;
    box-shadow: 0 4px 10px color-mix(in srgb, var(--button-color, #2ecc71) 25%, transparent) !important;
}
.btn-green-sidebar:hover { background-color: color-mix(in srgb, var(--button-color, #2ecc71) 88%, #000000) !important; transform: translateY(-2px) !important; }

.btn-google-sidebar {
    display: flex !important; align-items: center !important; justify-content: center !important;
    width: 100% !important; gap: 8px !important; background-color: #ffffff !important;
    color: #333333 !important; text-decoration: none !important; border-radius: 50px !important; 
    padding: 8px 20px !important; font-weight: 500 !important; font-size: 0.75rem !important; 
    white-space: nowrap !important; letter-spacing: 0.5px !important; border: 1px solid #dddddd !important;
    transition: 0.3s !important; margin-top: 10px !important; box-shadow: 0 2px 5px rgba(0,0,0,0.02) !important;
}
.btn-google-sidebar img { width: 18px !important; height: 18px !important; object-fit: contain !important; }
.btn-google-sidebar:hover { background-color: #f8f9fa !important; transform: translateY(-2px) !important; }
[data-theme="dark"] .btn-google-sidebar { background-color: #0c1719 !important; color: #ffffff !important; border-color: #1a2f34 !important; }
[data-theme="dark"] .btn-google-sidebar:hover { background-color: #16282c !important; }

.nav-links-sidebar { padding: 5px 8px !important; list-style: none; }
.side-nav > .nav-links-sidebar { flex: 0 0 auto !important; margin-bottom: 0 !important; }
.side-nav > .force-divider { flex: 0 0 auto !important; margin: 15px auto !important; }
.side-nav > .modern-theme-section, .side-nav > .sidebar-socials, .side-nav > .sidebar-footer-brand { flex: 0 0 auto !important; }
.nav-links-sidebar li { margin-bottom: 15px !important; }
.nav-links-sidebar a { display: flex !important; justify-content: flex-start !important; align-items: center !important; padding: 8px 10px !important; font-size: 0.85rem !important; font-weight: 400 !important; gap: 10px !important; border-radius: 10px !important; color: var(--text-main) !important; text-decoration: none; transition: 0.2s; }
.nav-links-sidebar a i { font-size: 0.75rem !important; width: 18px; text-align: center; }

.nav-links-sidebar a.active-link { background: var(--active-bg) !important; color: var(--text-main) !important; font-weight: 500 !important; }
[data-theme="dark"] .nav-links-sidebar a.active-link { background: var(--active-bg) !important; color: #ffffff !important; }

.nav-links-sidebar a:hover { background: var(--hover-bg); }
[data-theme="dark"] .nav-links-sidebar a:hover { background: var(--hover-bg); }

.sidebar-profile { padding: 15px; border-bottom: 1px solid var(--border-color); }
.sidebar-avatar-container { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.sidebar-avatar, .sidebar-avatar-container img { width: 55px !important; height: 55px !important; border-radius: 50% !important; object-fit: cover !important; margin-bottom: 8px !important; box-shadow: 0 4px 10px rgba(0,0,0,0.15) !important; border: 2px solid #f1f5f9; font-size: 2rem !important; display: flex; align-items: center; justify-content: center; color: var(--text-main); }
[data-theme="dark"] .sidebar-avatar, [data-theme="dark"] .sidebar-avatar-container img { border-color: #1a2f34; }

.sidebar-balance { font-size: 1.4rem; font-weight: 500; color: var(--balance-color, var(--main-color, #0d6efd)) !important; background: transparent; padding: 10px; border-radius: 8px; text-align: center; margin-bottom: 15px; }

.sidebar-actions { display: flex !important; justify-content: space-between !important; align-items: center !important; width: 100% !important; box-sizing: border-box !important; padding: 0 40px !important; margin-top: 5px !important; margin-bottom: 15px !important; }
.sidebar-actions a { color: var(--text-main) !important; font-size: 1.15rem !important; transition: 0.2s; }
.sidebar-actions a:hover { opacity: 0.7; }
.sidebar-actions a .fa-heart, .header-user-actions a .fa-heart { color: #e74c3c !important; }

.theme-switch-container { display: flex; align-items: center; justify-content: space-between; padding: 15px 20px; margin-top: 15px; border-top: 1px solid var(--border-color); margin-bottom: 25px; }
.pro-theme-btn { background: var(--bg-body); border: 1px solid var(--border-color); border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.3s; color: var(--text-main); font-size: 1.1rem; box-shadow: 0 2px 5px rgba(0,0,0,0.05); outline: none; }
.pro-theme-btn:hover { transform: rotate(15deg) scale(1.1); }
.pro-theme-btn .sun-icon { color: #f59e0b; } 
.pro-theme-btn .moon-icon { color: #818cf8; } 

.sidebar-socials { display: flex; justify-content: center; gap: 20px; padding: 0 15px; margin-bottom: 30px; }
.sidebar-socials a { text-decoration: none; font-size: 1.2rem; }
.fa-whatsapp { color: #25D366 !important; } 
.fa-telegram { color: #0088cc !important; } 
.fa-instagram { color: #E1306C !important; }

.wa-banner-link { display: inline-block; border-radius: 8px; overflow: hidden; transition: transform 0.3s ease; }
.wa-banner-link img { max-height: 55px !important; width: auto !important; object-fit: contain; }
.wa-banner-link:hover { transform: scale(1.05); }

.dev-credit { padding: 0 15px 30px 15px; text-align: center; font-size: 0.7rem; color: var(--text-main); opacity: 0.7; }
.dev-credit a { color: #2ecc71; text-decoration: none; font-weight: 500; }

/* 🚀 تعديل خلفية الـ Overlay في الموبايل بدون بلور وداكنة بسيط 🚀 */
#overlay { 
    display: none; 
    position: fixed; 
    top: 0; left: 0; width: 100%; height: 100%; 
    background: rgba(0, 0, 0, 0.14) !important; /* تعتيم خفيف جداً عند فتح القائمة على الموبايل */
    z-index: 9999998 !important; 
    /* تم إلغاء البلور هنا ليظهر المحتوى بوضوح */
}

/* =========================================
   --- البار العلوي (Header) --- 
   ========================================= */
.main-header {
    background: var(--header-bg, var(--main-color, #2ecc71)) !important;
    display: flex; justify-content: space-between; align-items: center; 
    padding: 0 15px 0 0; border: none !important; position: fixed;
    top: 0; left: 0; right: 0; height: var(--header-height); z-index: 1000;
    transition: right 0.28s ease, width 0.28s ease, background-color 0.3s ease;
}

.header-icons { display: flex; align-items: center; gap: 10px; height: 100%; }

.currency-wrapper, .header-balance-btn, .notif-bell {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    background: transparent !important; border: none !important; color: rgba(255, 255, 255, 0.9) !important; 
    box-shadow: none !important; text-shadow: none !important; margin: 0 !important; padding: 0 !important;
    line-height: 1 !important; text-decoration: none; font-weight: 400 !important; 
}

.user-link, #menu-btn {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    width: 26px !important; height: 26px !important; cursor: pointer;
    background-color: rgba(255, 255, 255, 0.9) !important; transition: transform 0.15s ease, opacity 0.2s ease;
    -webkit-tap-highlight-color: transparent; 
}
.user-link:active, #menu-btn:active { transform: scale(0.92); opacity: 0.8; }
.user-link *, #menu-btn * { display: none !important; }

.user-link {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,6A2,2 0 0,0 10,8A2,2 0 0,0 12,10A2,2 0 0,0 14,8A2,2 0 0,0 12,6M12,13C14.67,13 20,14.33 20,17V20H4V17C4,14.33 9.33,13 12,13M12,14.9C9.03,14.9 5.9,16.36 5.9,17V18.1H18.1V17C18.1,16.36 14.97,14.9 12,14.9Z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,6A2,2 0 0,0 10,8A2,2 0 0,0 12,10A2,2 0 0,0 14,8A2,2 0 0,0 12,6M12,13C14.67,13 20,14.33 20,17V20H4V17C4,14.33 9.33,13 12,13M12,14.9C9.03,14.9 5.9,16.36 5.9,17V18.1H18.1V17C18.1,16.36 14.97,14.9 12,14.9Z'/%3E%3C/svg%3E") no-repeat center / contain;
}

#menu-btn {
    border: none; outline: none; padding: 0; margin: 0 !important; 
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.currency-wrapper { position: relative; font-size: 1rem !important; }
.currency-select-hidden { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; appearance: none; -webkit-appearance: none; }

.header-balance-btn {
    font-size: 0.8rem !important; font-family: 'Tajawal', sans-serif; display: inline-flex !important;
    align-items: center !important; justify-content: center !important; transform: none !important;
    margin: 0 2px !important; text-decoration: none; border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 50px !important; padding: 0 8px !important; height: 26px !important; box-sizing: border-box !important;
}
.header-balance-btn span { font-weight: 500 !important; transform: translateY(1px) !important; display: inline-block; }
.header-balance-btn::before { content: ''; display: inline-block; width: 14px; height: 14px; background-color: #f5f5f5; border-radius: 50%; margin-right: 6px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M19 11h-6V5h-2v6H5v2h6v6h2v-6h6v-2z'/%3E%3C/svg%3E"); background-size: 9px 9px; background-position: center; background-repeat: no-repeat; transform: none !important; }

.header-vip-badge-link { display: inline-flex; align-items: center; justify-content: center; width: 25px !important; height: 25px !important; border-radius: 50%; overflow: hidden; background: transparent; transition: transform 0.2s ease; margin: 0 4px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); flex-shrink: 0; }
.header-vip-badge-link img { width: 100%; height: 100%; object-fit: cover; }
.header-vip-badge-link:hover { transform: scale(1.1); }

.notif-bell { position: relative; font-size: 1.05rem !important; font-weight: 400 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; transform: none !important; margin-right: 3px !important; margin-left: 5px !important; }
.notif-badge { position: absolute; top: -5px; right: -5px; background: #e74c3c; color: #ffffff !important; border-radius: 50%; padding: 2px 4px; font-size: 9px; font-weight: 700 !important; box-shadow: none !important; line-height: 1; }

.header-left-side { display: flex; align-items: center; gap: 15px; height: 100%; padding-left: 15px; }
.back-btn-header { color: rgba(255, 255, 255, 0.9) !important; font-size: 1.2rem !important; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; transition: transform 0.3s ease; margin-left: 5px; font-weight: 400 !important; }
.back-btn-header:hover { transform: translateX(-3px); }
.logo-container { display: flex; align-items: center; height: 100%; }
.logo-container img { height: 28px !important; max-height: 28px !important; width: auto !important; object-fit: contain; position: relative; top: 0 !important; }

body.guest-mode .header-icons { gap: 3px !important; }
body.guest-mode .user-link { display: inline-flex !important; width: 26px !important; height: 26px !important; background-color: rgba(255, 255, 255, 0.9) !important; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,6A2,2 0 0,0 10,8A2,2 0 0,0 12,10A2,2 0 0,0 14,8A2,2 0 0,0 12,6M12,13C14.67,13 20,14.33 20,17V20H4V17C4,14.33 9.33,13 12,13M12,14.9C9.03,14.9 5.9,16.36 5.9,17V18.1H18.1V17C18.1,16.36 14.97,14.9 12,14.9Z'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,6A2,2 0 0,0 10,8A2,2 0 0,0 12,10A2,2 0 0,0 14,8A2,2 0 0,0 12,6M12,13C14.67,13 20,14.33 20,17V20H4V17C4,14.33 9.33,13 12,13M12,14.9C9.03,14.9 5.9,16.36 5.9,17V18.1H18.1V17C18.1,16.36 14.97,14.9 12,14.9Z'/%3E%3C/svg%3E") no-repeat center / contain; transform: none !important; margin: 0 !important; font-size: 0 !important; }
body.guest-mode #menu-btn { display: inline-flex !important; width: 26px !important; height: 26px !important; background-color: rgba(255, 255, 255, 0.9) !important; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z'/%3E%3C/svg%3E") no-repeat center / contain; transform: none !important; margin: 0 !important; font-size: 0 !important; border: none !important; }
body.guest-mode .user-link *, body.guest-mode #menu-btn * { display: none !important; }
body.guest-mode .user-link, body.guest-mode #menu-btn { transition: transform 0.15s ease, opacity 0.2s ease; -webkit-tap-highlight-color: transparent; }
body.guest-mode .user-link:active, body.guest-mode #menu-btn:active { transform: scale(0.92) !important; opacity: 0.8; }

#global-preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: color-mix(in srgb, var(--site-bg, #ffffff) 85%, transparent) !important; z-index: 10000000; display: flex; justify-content: center; align-items: center; transition: opacity 0.5s ease-out, visibility 0.5s ease-out; }
[data-theme="dark"] #global-preloader { background-color: color-mix(in srgb, var(--site-bg, #0c1719) 85%, transparent) !important; }
.loader-wrapper { position: relative; width: 100px;  height: 100px; display: flex; justify-content: center; align-items: center; background: transparent; }
.spinner-ring { position: absolute; width: 100%; height: 100%; border: 3px solid color-mix(in srgb, var(--button-color, #2ecc71) 12%, transparent); border-top-color: var(--button-color, #2ecc71); border-right-color: var(--button-color, #2ecc71); border-radius: 50%; animation: spin-loader 0.8s linear infinite; }
.loader-logo { width: 55px;  height: auto; z-index: 10; filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.2)); animation: pulse-logo 1.5s ease-in-out infinite alternate; }

@keyframes spin-loader { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes pulse-logo { 0% { transform: scale(0.9); opacity: 0.8; } 100% { transform: scale(1.1); opacity: 1; } }
.preloader-hidden { opacity: 0; visibility: hidden; }

html, body { background: var(--site-bg, var(--bg-body, #ffffff)) !important; color: var(--text-color, var(--text-main, #333333)) !important; }
.main-header { background: var(--main-color, #2ecc71) !important; }
.side-nav, .login-section-sidebar, .sidebar-profile { background: var(--section-bg, var(--bg-side, #ffffff)) !important; color: var(--text-color, var(--text-main, #333333)) !important; border-color: var(--border-color, #eeeeee) !important; }
.nav-links-sidebar a, .sidebar-actions a, .theme-text-thin, .sidebar-name-text, .dev-credit, .dev-credit a { color: var(--text-color, var(--text-main, #333333)) !important; }
.login-section-sidebar p, .user-id-muted { color: var(--muted-text-color, #64748b) !important; }
.nav-links-sidebar a.active-link { background: rgba(0, 0, 0, 0.055) !important; color: var(--text-color, var(--text-main, #333333)) !important; }
.nav-links-sidebar a:hover { background: rgba(0, 0, 0, 0.035) !important; }
.sidebar-socials a { background: rgba(0, 0, 0, 0.04) !important; }

[data-theme="dark"] .nav-links-sidebar a.active-link { background: var(--sidebar-active-bg, color-mix(in srgb, var(--main-color, #2ecc71) 18%, transparent)) !important; color: var(--text-color, #ffffff) !important; }
[data-theme="dark"] .nav-links-sidebar a:hover { background: color-mix(in srgb, var(--text-color, #ffffff) 7%, transparent) !important; }
[data-theme="dark"] .sidebar-socials a { background: rgba(255, 255, 255, 0.05) !important; }
.sidebar-balance, .header-balance-btn { color: var(--balance-color, var(--main-color, #2ecc71)) !important; }
.btn-green-sidebar, .unique-slider input:checked, .btn-green-login { background-color: var(--auth-color, var(--main-color, #2ecc71)) !important; }
.unique-slider { background-color: color-mix(in srgb, var(--muted-text-color, #94a3b8) 30%, var(--section-bg, #ffffff)) !important; }
.unique-switch input:checked + .unique-slider { background-color: var(--auth-color, var(--main-color, #2ecc71)) !important; }
.force-divider { background-color: color-mix(in srgb, var(--text-color, #333333) 20%, transparent) !important; }
.btn-google-sidebar { background: var(--card-bg, #ffffff) !important; color: var(--text-color, #333333) !important; border-color: var(--border-color, #dddddd) !important; }
#global-preloader { background-color: color-mix(in srgb, var(--site-bg, #ffffff) 90%, transparent) !important; }
.spinner-ring { border-color: color-mix(in srgb, var(--auth-color, var(--main-color, #2ecc71)) 12%, transparent) !important; border-top-color: var(--auth-color, var(--main-color, #2ecc71)) !important; border-right-color: var(--auth-color, var(--main-color, #2ecc71)) !important; }

.header-balance-btn { color: var(--header-balance-color, rgba(255,255,255,0.9)) !important; border-color: color-mix(in srgb, var(--header-balance-color, #ffffff) 30%, transparent) !important; }
[data-theme="light"] .header-balance-btn, html:not([data-theme="dark"]) .header-balance-btn { color: rgba(255,255,255,0.9) !important; }

.login-section-sidebar, [data-theme="dark"] .login-section-sidebar, html:not([data-theme="dark"]) .login-section-sidebar { background: #0f172a !important; color: #ffffff !important; border-color: rgba(255, 255, 255, 0.12) !important; box-shadow: 0 10px 25px rgba(15, 23, 42, 0.18) !important; }
.login-section-sidebar h3, .login-section-sidebar p, [data-theme="dark"] .login-section-sidebar h3, [data-theme="dark"] .login-section-sidebar p, html:not([data-theme="dark"]) .login-section-sidebar h3, html:not([data-theme="dark"]) .login-section-sidebar p { color: #ffffff !important; }
.login-section-sidebar p { opacity: 0.88 !important; }

/* ==================================================
   ✅ سلوك الكمبيوتر
================================================== */
@media (min-width: 900px) {
    html.desktop-sidebar-open-initial body, body.sidebar-desktop-open { padding-right: var(--desktop-sidebar-width) !important; }
    
    /* 🚀 التأكد من الظهور في وضع الكمبيوتر أياً كان الوضع الداكن 🚀 */
    html.desktop-sidebar-open-initial .side-nav, body.sidebar-desktop-open .side-nav,
    [data-theme="dark"] html.desktop-sidebar-open-initial .side-nav,
    [data-theme="dark"] body.sidebar-desktop-open .side-nav { right: 0 !important; top: 0 !important; height: 100dvh !important; box-shadow: none !important; border-left: 1px solid #e5e7eb !important; border-left-color: color-mix(in srgb, var(--border-color, #e5e7eb) 82%, #9ca3af) !important; }
    
    body.sidebar-desktop-closed .side-nav,
    [data-theme="dark"] body.sidebar-desktop-closed .side-nav { right: calc(-1 * var(--desktop-sidebar-width)) !important; }
    
    html.desktop-sidebar-open-initial .main-header, body.sidebar-desktop-open .main-header { right: var(--desktop-sidebar-width) !important; left: 0 !important; width: auto !important; }
    body.sidebar-desktop-closed .main-header { right: 0 !important; left: 0 !important; width: auto !important; }
    body.sidebar-desktop-open #overlay, body.sidebar-desktop-closed #overlay, html.desktop-sidebar-open-initial #overlay { display: none !important; pointer-events: none !important; }
    body.sidebar-desktop-open .site-container { max-width: min(1140px, calc(100vw - var(--desktop-sidebar-width) - 48px)); }
}

@media (max-width: 899.98px) {
    body.sidebar-desktop-open, body.sidebar-desktop-closed, html.desktop-sidebar-open-initial body { padding-right: 0 !important; }
    .main-header { right: 0 !important; left: 0 !important; }
    .side-nav { box-shadow: none !important; border-left: 1px solid #e5e7eb !important; border-left-color: color-mix(in srgb, var(--border-color, #e5e7eb) 82%, #9ca3af) !important; border-right: none !important; }
}

/* ======================================================================
   KAYAN NEON SIDEBAR V3 - فاتح افتراضياً وداكن مع الوضع الداكن
   ====================================================================== */
:root {
    --desktop-sidebar-width: 285px;

    /* ألوان القائمة في الوضع الفاتح */
    --neo-sidebar-bg: #ffffff;
    --neo-sidebar-bg-2: #ffffff;
    --neo-sidebar-card: #ffffff;
    --neo-sidebar-line: #e2e8f0;
    --neo-sidebar-text: #1f2937;
    --neo-sidebar-muted: #64748b;
    --neo-sidebar-grid: transparent;
    --neo-sidebar-shadow: rgba(15, 23, 42, 0.12);
    --neo-profile-line: rgba(100, 116, 139, 0.16);
    --neo-item-hover: #f1f5f9;
    --neo-item-active: #e5e7eb;
    --neo-item-active-border: transparent;
    --neo-icon-bg: transparent;
    --neo-icon-active-bg: transparent;
    --neo-tool-bg: #ffffff;
    --neo-tool-border: #e2e8f0;
    --neo-social-bg: #f1f5f9;
    --neo-avatar-inner: #ffffff;
    --neo-avatar-status-border: #ffffff;

    --neo-accent: #7c3aed;
    --neo-accent-2: #5b21b6;
    --neo-accent-soft: rgba(124, 58, 237, 0.12);
    --neo-danger: #e11d48;
}

[data-theme="dark"],
body.dark-mode,
body.dark-theme,
body.theme-dark {
    /* ألوان القائمة في الوضع الداكن فقط */
    --neo-sidebar-bg: #070d1a;
    --neo-sidebar-bg-2: #0a1222;
    --neo-sidebar-card: rgba(255, 255, 255, 0.045);
    --neo-sidebar-line: rgba(165, 180, 252, 0.12);
    --neo-sidebar-text: #f8f7ff;
    --neo-sidebar-muted: #8d97ad;
    --neo-sidebar-grid: rgba(255, 255, 255, 0.014);
    --neo-sidebar-shadow: rgba(2, 6, 23, 0.34);
    --neo-profile-line: rgba(148, 163, 184, 0.10);
    --neo-item-hover: rgba(148, 163, 184, 0.10);
    --neo-item-active: rgba(148, 163, 184, 0.20);
    --neo-item-active-border: transparent;
    --neo-icon-bg: transparent;
    --neo-icon-active-bg: transparent;
    --neo-tool-bg: rgba(255, 255, 255, 0.035);
    --neo-tool-border: rgba(148, 163, 184, 0.12);
    --neo-social-bg: rgba(255, 255, 255, 0.04);
    --neo-avatar-inner: #111827;
    --neo-avatar-status-border: #08101d;
    --neo-danger: #fb7185;
}

.main-header {
    background: radial-gradient(circle at 82% -40%, rgba(124, 58, 237, 0.32), transparent 42%), linear-gradient(180deg, #090f1d 0%, #050914 100%) !important;
    border-bottom: 1px solid rgba(139, 92, 246, 0.13) !important;
    box-shadow: 0 8px 28px rgba(2, 6, 23, 0.18) !important;
}

/* زر القائمة العلوية */
#menu-btn {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
    -webkit-mask: none !important;
    mask: none !important;
    box-shadow: none !important;
}
#menu-btn i { display: block !important; font-size: 15px !important; color: #ffffff !important; }

.header-balance-btn { height: 30px !important; border-color: rgba(139, 92, 246, 0.52) !important; background: rgba(124, 58, 237, 0.08) !important; color: #d9c9ff !important; }
.header-balance-btn::before { background-color: #8b5cf6 !important; filter: invert(1); }
.notif-bell { color: #edf0ff !important; }
.logo-container img { filter: drop-shadow(0 4px 9px rgba(124, 58, 237, 0.25)); }

/* الغلاف الخارجي للقائمة: فاتح افتراضياً */
.side-nav {
    position: fixed !important;
    top: 0 !important;
    right: calc(-1 * var(--desktop-sidebar-width)) !important;
    width: var(--desktop-sidebar-width) !important;
    height: 100dvh !important;
    padding: 0 !important;
    overflow: hidden !important;
    color: var(--neo-sidebar-text) !important;
    background: var(--neo-sidebar-bg) !important;
    border: 0 !important;
    border-left: 1px solid var(--neo-sidebar-line) !important;
    box-shadow: -18px 0 45px var(--neo-sidebar-shadow) !important;
    transition: right .3s cubic-bezier(.22,.82,.24,1) !important;
    isolation: isolate;
}

[data-theme="dark"] .side-nav,
body.dark-mode .side-nav,
body.dark-theme .side-nav,
body.theme-dark .side-nav {
    color: var(--neo-sidebar-text) !important;
    background: var(--neo-sidebar-bg) !important;
    border-left-color: var(--neo-sidebar-line) !important;
    box-shadow: -24px 0 70px var(--neo-sidebar-shadow) !important;
}

.neo-sidebar-frame {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    padding: env(safe-area-inset-top, 0px) 14px calc(14px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    color: var(--neo-sidebar-text);
    background: #ffffff !important;
    border-radius: 0 !important;
}

[data-theme="dark"] .neo-sidebar-frame,
body.dark-mode .neo-sidebar-frame,
body.dark-theme .neo-sidebar-frame,
body.theme-dark .neo-sidebar-frame {
    background: var(--neo-sidebar-bg) !important;
}

.neo-sidebar-frame::before {
    content: none !important;
    display: none !important;
    background: none !important;
}

.neo-profile,
.neo-guest-profile {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 30px 12px 15px;
    border-bottom: 1px solid var(--neo-profile-line);
}

.neo-avatar {
    position: relative;
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin-bottom: 9px;
    border-radius: 50%;
    padding: 2px;
    color: #ffffff !important;
    text-decoration: none !important;
    background: linear-gradient(145deg, #8b5cf6, #3b82f6);
    box-shadow: 0 0 0 5px rgba(124,58,237,.08), 0 12px 28px rgba(15,23,42,.18);
}
[data-theme="dark"] .neo-avatar,
body.dark-mode .neo-avatar,
body.dark-theme .neo-avatar,
body.theme-dark .neo-avatar { box-shadow: 0 0 0 5px rgba(124,58,237,.08), 0 12px 28px rgba(2,6,23,.42); }

.neo-avatar::after {
    content: "";
    position: absolute;
    right: 1px;
    bottom: 3px;
    width: 10px;
    height: 10px;
    border: 2px solid var(--neo-avatar-status-border);
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 10px rgba(52,211,153,.58);
}
.neo-avatar img,
.neo-avatar > span {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: grid;
    place-items: center;
    background: var(--neo-avatar-inner);
    color: var(--neo-sidebar-text);
    font-size: 22px;
}
.neo-logo-avatar img { object-fit: contain; padding: 10px; box-sizing: border-box; }
.neo-user-line { display: flex; align-items: center; justify-content: center; gap: 6px; max-width: 100%; }
.neo-user-line > strong { max-width: 125px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--neo-sidebar-text) !important; font-size: .82rem; font-weight: 700; }
.neo-verified { color: #3b82f6; font-size: .69rem; }
.neo-membership { display: inline-flex; align-items: center; gap: 4px; max-width: 92px; padding: 2px 7px; border: 1px solid rgba(217,119,6,.28); border-radius: 999px; color: #b45309 !important; background: rgba(251,191,36,.10); text-decoration: none !important; font-size: .57rem; font-weight: 700; }
[data-theme="dark"] .neo-membership,
body.dark-mode .neo-membership,
body.dark-theme .neo-membership,
body.theme-dark .neo-membership { color: #fde68a !important; border-color: rgba(251,191,36,.28); background: rgba(251,191,36,.08); }
.neo-membership img { width: 13px; height: 13px; border-radius: 50%; object-fit: cover; }
.neo-membership span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.neo-user-id { margin-top: 3px; color: var(--neo-sidebar-muted); font-size: .55rem; }
.neo-balance { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 10px; color: var(--neo-sidebar-text) !important; text-decoration: none !important; }
.neo-balance strong { font-size: 1.31rem; line-height: 1.05; letter-spacing: .2px; }
.neo-balance.debt strong { color: var(--neo-danger); }

.neo-kicker { color: #7c3aed; font-size: .59rem; margin-top: 2px; }
.neo-guest-profile h3 { margin: 4px 0; color: var(--neo-sidebar-text); font-size: .95rem; }
.neo-guest-profile p { max-width: 230px; margin: 0 0 13px; color: var(--neo-sidebar-muted); font-size: .65rem; line-height: 1.7; }
.neo-login-primary,
.neo-login-google { width: 100%; min-height: 40px; display: flex !important; align-items: center; justify-content: center; gap: 8px; margin-top: 7px; border-radius: 12px; text-decoration: none !important; font-size: .69rem; font-weight: 700; }
.neo-login-primary { color: #ffffff !important; background: linear-gradient(100deg, #8b5cf6, #5b21b6); box-shadow: 0 10px 22px rgba(91,33,182,.20); }
.neo-login-google { color: var(--neo-sidebar-text) !important; border: 1px solid var(--neo-tool-border); background: var(--neo-tool-bg); }

.neo-menu { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 4px; padding: 13px 0 10px !important; margin: 0 !important; list-style: none; }
.neo-menu li { margin: 0 !important; padding: 0 !important; }
/* توحيد المسافة بين الرئيسية وإضافة رصيد مع باقي عناصر القائمة */
.neo-menu > li:first-child { margin-bottom: 0 !important; }
.neo-menu-link {
    position: relative;
    display: flex !important;
    align-items: center;
    gap: 9px;
    min-height: 39px;
    padding: 5px 11px !important;
    border: 0 !important;
    outline: 0 !important;
    border-radius: 11px;
    color: var(--neo-sidebar-text) !important;
    background: transparent !important;
    text-decoration: none !important;
    font-size: .72rem !important;
    font-weight: 600 !important;
    transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

/* إزالة النقطة البيضاء نهائياً */
.neo-menu-link::after,
.neo-menu-link.active-link::after {
    content: none !important;
    display: none !important;
    opacity: 0 !important;
    box-shadow: none !important;
}

.neo-menu-link:hover {
    transform: translateX(-2px);
    color: var(--neo-sidebar-text) !important;
    border-color: transparent !important;
    background: var(--neo-item-hover) !important;
    box-shadow: none !important;
}

/* العنصر المفعّل بخلفية رصاصية بدلاً من البنفسجي */
.neo-menu-link.active-link {
    color: var(--neo-sidebar-text) !important;
    border-color: transparent !important;
    outline: 0 !important;
    background: var(--neo-item-active) !important;
    box-shadow: none !important;
}

.neo-menu-icon {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border-radius: 0;
    color: var(--neo-icon-color, #7c3aed) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    font-size: .74rem;
}
.neo-menu-icon i { color: inherit !important; }
[data-theme="dark"] .neo-menu-icon,
body.dark-mode .neo-menu-icon,
body.dark-theme .neo-menu-icon,
body.theme-dark .neo-menu-icon { color: var(--neo-icon-color, #c4b5fd) !important; }
.neo-menu-link.active-link .neo-menu-icon {
    color: var(--neo-icon-color, #7c3aed) !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* لون مستقل لكل أيقونة بدون أي مربع خلفها */
.neo-icon-home      { --neo-icon-color: #22c55e; }
.neo-icon-funds     { --neo-icon-color: #8b5cf6; }
.neo-icon-payments  { --neo-icon-color: #f59e0b; }
.neo-icon-wallet    { --neo-icon-color: #06b6d4; }
.neo-icon-orders    { --neo-icon-color: #ef4444; }
.neo-icon-profile   { --neo-icon-color: #7c3aed; }
.neo-icon-favorite  { --neo-icon-color: #ec4899; }
.neo-icon-support   { --neo-icon-color: #3b82f6; }
.neo-icon-affiliate { --neo-icon-color: #14b8a6; }
.neo-icon-security  { --neo-icon-color: #10b981; }
.neo-icon-verify    { --neo-icon-color: #6366f1; }
.neo-icon-api       { --neo-icon-color: #f97316; }
.neo-icon-about     { --neo-icon-color: #0ea5e9; }
.neo-icon-logout    { --neo-icon-color: #e11d48; }
.neo-menu-link > span:last-child { flex: 1; text-align: right; }
.neo-api-icon { font-family: ui-monospace, monospace; font-size: .52rem; font-weight: 900; }
.neo-logout { color: #e11d48 !important; margin-top: 3px; }
[data-theme="dark"] .neo-logout,
body.dark-mode .neo-logout,
body.dark-theme .neo-logout,
body.theme-dark .neo-logout { color: #fda4af !important; }
.neo-logout .neo-menu-icon { color: var(--neo-danger) !important; background: transparent !important; }

.neo-sidebar-bottom { position: relative; z-index: 2; margin-top: auto; padding-top: 9px; border-top: 1px solid var(--neo-profile-line); }
.neo-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.neo-tools > :only-child { grid-column: 1 / -1; }
.neo-currency,
.neo-theme-switch { position: relative; min-height: 38px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 8px; border: 1px solid var(--neo-tool-border); border-radius: 11px; color: var(--neo-sidebar-text); background: var(--neo-tool-bg); box-sizing: border-box; font-size: .61rem; }
.neo-currency select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.neo-currency > i:first-child { color: #7c3aed; }
.neo-currency > i:last-of-type { font-size: .48rem; color: var(--neo-sidebar-muted); }
.neo-theme-switch { cursor: pointer; justify-content: space-between; }
.neo-theme-switch input { position: absolute; opacity: 0; pointer-events: none; }
.neo-theme-switch small { color: var(--neo-sidebar-text); font-size: .55rem; white-space: nowrap; }
.neo-theme-track { position: relative; width: 38px; height: 20px; display: flex; align-items: center; justify-content: space-between; padding: 0 4px; border-radius: 999px; color: #64748b; background: #e2e8f0; box-sizing: border-box; font-size: 8px; }
[data-theme="dark"] .neo-theme-track,
body.dark-mode .neo-theme-track,
body.dark-theme .neo-theme-track,
body.theme-dark .neo-theme-track { color: #9aa3b7; background: #172033; }
.neo-theme-track::before { content: ""; position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; border-radius: 50%; background: #ffffff; box-shadow: 0 2px 7px rgba(0,0,0,.20); transition: transform .25s ease; }
.neo-theme-switch input:checked + .neo-theme-track { background: linear-gradient(90deg, #8b5cf6, #5b21b6); color: #ffffff; }
.neo-theme-switch input:checked + .neo-theme-track::before { transform: translateX(-18px); }

.neo-socials { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; padding: 9px 7px; border: 1px solid var(--neo-tool-border); border-radius: 12px; background: var(--neo-tool-bg); }
.neo-socials a { width: 28px; height: 28px; display: grid !important; place-items: center; border-radius: 9px; color: var(--social-color, #7c3aed) !important; background: var(--neo-social-bg); text-decoration: none !important; transition: transform .18s ease, background .18s ease; }
.neo-socials a:hover { transform: translateY(-2px); background: var(--neo-item-hover); }
.neo-socials i { color: inherit !important; font-size: .76rem !important; }

.neo-footer { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px 5px 0; color: var(--neo-sidebar-muted); font-size: .49rem; }
.neo-footer-brand { display: flex; align-items: center; gap: 6px; color: var(--neo-sidebar-text) !important; text-decoration: none !important; }
.neo-footer-brand img { width: 21px; height: 21px; object-fit: contain; }
.neo-footer-brand strong { font-size: .62rem; letter-spacing: .3px; }

@media (max-width: 899.98px) {
    :root { --desktop-sidebar-width: min(72vw, 250px); }
    .side-nav { right: calc(-1 * var(--desktop-sidebar-width)) !important; }
    .side-nav.open { right: 0 !important; }
    .neo-sidebar-frame { border-radius: 0 !important; }
    #overlay { z-index: 9999998 !important; }
}

@media (max-width: 360px) {
    :root { --desktop-sidebar-width: 76vw; }
    .neo-sidebar-frame { padding-inline: 10px; }
    .neo-profile { padding-inline: 6px; }
    .neo-menu-link { min-height: 38px; }
}

/* تثبيت الشكل النهائي: لا خلفية للأيقونات ولا حدود حول العنصر المحدد */
.neo-menu-link,
.neo-menu-link:hover,
.neo-menu-link:focus,
.neo-menu-link:focus-visible,
.neo-menu-link.active-link {
    border: 0 !important;
    outline: 0 !important;
}
.neo-menu-link .neo-menu-icon,
.neo-menu-link:hover .neo-menu-icon,
.neo-menu-link.active-link .neo-menu-icon {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .side-nav,
    .neo-sidebar-close,
    .neo-menu-link,
    .neo-theme-track::before { transition: none !important; }
}


/* ======================================================================
   KAYAN SIDEBAR V6 - خلفية نظيفة + دوائر بلا حواف + توسيع الموبايل
   ====================================================================== */

/* اسم المستخدم أكبر بدرجة بسيطة */
.neo-user-line > strong {
    max-width: 138px !important;
    font-size: .91rem !important;
    line-height: 1.35 !important;
    font-weight: 800 !important;
}

/* تكبير نصوص القائمة الجانبية بشكل متوازن */
.neo-menu-link {
    font-size: .80rem !important;
    font-weight: 650 !important;
    line-height: 1.35 !important;
}

.neo-theme-switch small,
.neo-currency,
.neo-footer,
.neo-kicker,
.neo-user-id {
    font-size: .61rem !important;
}

.neo-guest-profile p {
    font-size: .69rem !important;
}

/* الاختصارات الثلاثة أسفل الرصيد: خروج يمين، حسابي وسط، المفضلة يسار */
.neo-profile-actions {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 224px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    justify-items: center;
    gap: 22px;
    margin: 15px auto 0;
    padding: 0 2px;
    direction: rtl;
    box-sizing: border-box;
}

.neo-profile-action {
    width: 38px;
    height: 38px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    border-radius: 50%;
    color: #111827 !important;
    background: #e5e7eb !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent;
    transition: transform .18s ease, background .18s ease;
}

.neo-profile-action i {
    color: inherit !important;
    font-size: .92rem !important;
}

.neo-profile-action:hover,
.neo-profile-action:focus-visible {
    transform: translateY(-2px);
    background: #d9dde3 !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

.neo-profile-action:active {
    transform: scale(.94);
}

/* تسجيل الخروج وحسابي: أسود في الفاتح */
.neo-profile-action-logout,
.neo-profile-action-account {
    color: #111827 !important;
}

/* القلب أحمر دائماً */
.neo-profile-action-favorite {
    color: #ef4444 !important;
}

.neo-profile-action.is-active {
    background: #d9dde3 !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

/* الوضع الداكن: الدائرة رصاصية بلا حواف، والخروج/الحساب أبيض */
[data-theme="dark"] .neo-profile-action,
body.dark-mode .neo-profile-action,
body.dark-theme .neo-profile-action,
body.theme-dark .neo-profile-action {
    background: #374151 !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

[data-theme="dark"] .neo-profile-action-logout,
[data-theme="dark"] .neo-profile-action-account,
body.dark-mode .neo-profile-action-logout,
body.dark-mode .neo-profile-action-account,
body.dark-theme .neo-profile-action-logout,
body.dark-theme .neo-profile-action-account,
body.theme-dark .neo-profile-action-logout,
body.theme-dark .neo-profile-action-account {
    color: #ffffff !important;
}

[data-theme="dark"] .neo-profile-action-favorite,
body.dark-mode .neo-profile-action-favorite,
body.dark-theme .neo-profile-action-favorite,
body.theme-dark .neo-profile-action-favorite {
    color: #ef4444 !important;
}

[data-theme="dark"] .neo-profile-action:hover,
[data-theme="dark"] .neo-profile-action:focus-visible,
body.dark-mode .neo-profile-action:hover,
body.dark-theme .neo-profile-action:hover,
body.theme-dark .neo-profile-action:hover,
[data-theme="dark"] .neo-profile-action.is-active,
body.dark-mode .neo-profile-action.is-active,
body.dark-theme .neo-profile-action.is-active,
body.theme-dark .neo-profile-action.is-active {
    background: #4b5563 !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

/* مساحة رأس الحساب بعد إضافة الاختصارات */
.neo-profile {
    padding-bottom: 17px !important;
}

/* توسيع بسيط للموبايل فقط مع ترك الكمبيوتر كما هو */
@media (max-width: 899.98px) {
    :root {
        --desktop-sidebar-width: min(76vw, 270px);
    }

    html.ios-device {
        --desktop-sidebar-width: min(82vw, 292px);
    }
}

@media (max-width: 390px) {
    :root {
        --desktop-sidebar-width: min(78vw, 268px);
    }

    html.ios-device {
        --desktop-sidebar-width: min(84vw, 286px);
    }
}

@media (max-width: 360px) {
    .neo-profile-actions {
        max-width: 210px;
        gap: 17px;
    }
    .neo-menu-link {
        font-size: .77rem !important;
    }
}

/* ======================================================================
   KAYAN SIDEBAR V8 - تعتيم خفيف + محول عملة بلا ظل + مسافات أوضح
   ====================================================================== */

/* خط الفصل أصبح تابعاً لمحول العملة، لذلك لا نكرر الخط أسفل الملف الشخصي */
.neo-profile {
    border-bottom: 0 !important;
    padding-bottom: 13px !important;
}

.neo-currency-divider {
    position: relative;
    z-index: 45;
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0 5px;
    box-sizing: border-box;
}

.neo-currency-divider::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    height: 1px;
    background: var(--neo-profile-line);
    transform: translateY(-50%);
    pointer-events: none;
}

.neo-currency-trigger {
    position: relative;
    z-index: 2;
    width: min(218px, calc(100% - 18px));
    min-height: 42px;
    display: grid;
    grid-template-columns: 27px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 5px 12px 5px 11px;
    border: 0 !important;
    outline: 0 !important;
    border-radius: 999px;
    color: #111827;
    background: #ffffff;
    box-shadow: none !important;
    font-family: 'Tajawal', sans-serif;
    cursor: pointer;
    direction: rtl;
    -webkit-tap-highlight-color: transparent;
    transition: transform .18s ease, background .18s ease;
}

.neo-currency-trigger:hover,
.neo-currency-trigger:focus-visible {
    transform: translateY(-1px);
    box-shadow: none !important;
    background: #f8fafc;
}

.neo-currency-trigger:active {
    transform: scale(.985);
}

/* أيقونة سهمين متعاكسين من غير دائرة أو خلفية */
.neo-currency-swap-icon {
    position: relative;
    width: 25px;
    height: 22px;
    display: block;
    color: var(--main-color, #7c3aed);
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible;
}

.neo-swap-arrow {
    position: absolute;
    right: 50%;
    color: inherit !important;
    font-size: .64rem;
    line-height: 1;
    transform-origin: center;
    transition: top .24s ease, transform .24s ease;
}

.neo-swap-arrow-top {
    top: 2px;
    transform: translateX(50%);
}

.neo-swap-arrow-bottom {
    top: 11px;
    transform: translateX(50%);
}

/* عند فتح القائمة يتبادل السهمان الاتجاه والمكان */
.neo-currency-divider.is-open .neo-swap-arrow-top {
    top: 11px;
    transform: translateX(50%) rotate(180deg);
}

.neo-currency-divider.is-open .neo-swap-arrow-bottom {
    top: 2px;
    transform: translateX(50%) rotate(180deg);
}

.neo-currency-label {
    min-width: 0;
    color: #475569;
    font-size: .64rem;
    font-weight: 750;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
}

.neo-currency-code {
    min-width: 36px;
    color: #111827;
    font-family: ui-sans-serif, system-ui, sans-serif;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .45px;
    line-height: 1;
    text-align: left;
    white-space: nowrap;
}

.neo-currency-dropdown {
    position: absolute;
    z-index: 60;
    top: calc(100% + 3px);
    right: 8px;
    left: 8px;
    max-height: min(286px, 45vh);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, .20);
    border-radius: 17px;
    color: #111827;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 22px 52px rgba(15, 23, 42, .22);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-7px) scale(.975);
    transform-origin: top center;
    transition: opacity .20s ease, visibility .20s ease, transform .20s ease;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

.neo-currency-divider.is-open .neo-currency-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.neo-currency-dropdown-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(148, 163, 184, .16);
    background: linear-gradient(135deg, color-mix(in srgb, var(--main-color, #8b5cf6) 9%, #ffffff), #ffffff);
}

.neo-currency-dropdown-head span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #111827;
    font-size: .68rem;
    font-weight: 800;
}

.neo-currency-dropdown-head span i {
    color: var(--main-color, #7c3aed);
}

.neo-currency-dropdown-head small {
    color: #94a3b8;
    font-size: .50rem;
    font-weight: 700;
    white-space: nowrap;
}

.neo-currency-options {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 7px;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, .45) transparent;
}

.neo-currency-options::-webkit-scrollbar {
    width: 4px;
}

.neo-currency-options::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(148, 163, 184, .45);
}

.neo-currency-option {
    width: 100%;
    min-height: 46px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 9px;
    margin: 0 0 4px;
    padding: 6px 9px;
    border: 0 !important;
    outline: 0 !important;
    border-radius: 12px;
    color: #111827;
    background: transparent;
    font-family: 'Tajawal', sans-serif;
    text-align: right;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .16s ease, transform .16s ease;
}

.neo-currency-option:last-child {
    margin-bottom: 0;
}

.neo-currency-option:hover,
.neo-currency-option:focus-visible {
    background: #f1f5f9;
    transform: translateX(-2px);
}

.neo-currency-option.is-current {
    background: color-mix(in srgb, var(--main-color, #8b5cf6) 10%, #f8fafc);
}

.neo-currency-option-symbol {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: var(--main-color, #7c3aed);
    background: color-mix(in srgb, var(--main-color, #8b5cf6) 10%, #ffffff);
    font-family: ui-sans-serif, system-ui, sans-serif;
    font-size: .70rem;
    font-weight: 900;
}

.neo-currency-option-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.neo-currency-option-copy strong {
    color: #111827;
    font-family: ui-sans-serif, system-ui, sans-serif;
    font-size: .69rem;
    font-weight: 850;
    letter-spacing: .35px;
}

.neo-currency-option-copy small {
    color: #94a3b8;
    font-size: .51rem;
    font-weight: 650;
}

.neo-currency-option-check {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: transparent;
    background: transparent;
    font-size: .55rem;
}

.neo-currency-option.is-current .neo-currency-option-check {
    color: #ffffff;
    background: var(--main-color, #7c3aed);
    box-shadow: 0 5px 12px color-mix(in srgb, var(--main-color, #8b5cf6) 25%, transparent);
}

/* الوضع الداكن */
[data-theme="dark"] .neo-currency-trigger,
body.dark-mode .neo-currency-trigger,
body.dark-theme .neo-currency-trigger,
body.theme-dark .neo-currency-trigger {
    color: #ffffff;
    background: #18202c;
    box-shadow: none !important;
}

[data-theme="dark"] .neo-currency-trigger:hover,
[data-theme="dark"] .neo-currency-trigger:focus-visible,
body.dark-mode .neo-currency-trigger:hover,
body.dark-theme .neo-currency-trigger:hover,
body.theme-dark .neo-currency-trigger:hover {
    background: #202a38;
    box-shadow: none !important;
}

[data-theme="dark"] .neo-currency-label,
body.dark-mode .neo-currency-label,
body.dark-theme .neo-currency-label,
body.theme-dark .neo-currency-label {
    color: #cbd5e1;
}

[data-theme="dark"] .neo-currency-code,
body.dark-mode .neo-currency-code,
body.dark-theme .neo-currency-code,
body.theme-dark .neo-currency-code {
    color: #ffffff;
}

[data-theme="dark"] .neo-currency-dropdown,
body.dark-mode .neo-currency-dropdown,
body.dark-theme .neo-currency-dropdown,
body.theme-dark .neo-currency-dropdown {
    color: #ffffff;
    border-color: rgba(255, 255, 255, .07);
    background: rgba(17, 24, 39, .98);
    box-shadow: 0 24px 58px rgba(0, 0, 0, .52);
}

[data-theme="dark"] .neo-currency-dropdown-head,
body.dark-mode .neo-currency-dropdown-head,
body.dark-theme .neo-currency-dropdown-head,
body.theme-dark .neo-currency-dropdown-head {
    border-bottom-color: rgba(255, 255, 255, .07);
    background: linear-gradient(135deg, color-mix(in srgb, var(--main-color, #8b5cf6) 14%, #111827), #111827);
}

[data-theme="dark"] .neo-currency-dropdown-head span,
[data-theme="dark"] .neo-currency-option,
[data-theme="dark"] .neo-currency-option-copy strong,
body.dark-mode .neo-currency-dropdown-head span,
body.dark-mode .neo-currency-option,
body.dark-mode .neo-currency-option-copy strong,
body.dark-theme .neo-currency-dropdown-head span,
body.dark-theme .neo-currency-option,
body.dark-theme .neo-currency-option-copy strong,
body.theme-dark .neo-currency-dropdown-head span,
body.theme-dark .neo-currency-option,
body.theme-dark .neo-currency-option-copy strong {
    color: #ffffff;
}

[data-theme="dark"] .neo-currency-option:hover,
[data-theme="dark"] .neo-currency-option:focus-visible,
body.dark-mode .neo-currency-option:hover,
body.dark-theme .neo-currency-option:hover,
body.theme-dark .neo-currency-option:hover {
    background: rgba(255, 255, 255, .06);
}

[data-theme="dark"] .neo-currency-option.is-current,
body.dark-mode .neo-currency-option.is-current,
body.dark-theme .neo-currency-option.is-current,
body.theme-dark .neo-currency-option.is-current {
    background: color-mix(in srgb, var(--main-color, #8b5cf6) 17%, #111827);
}

[data-theme="dark"] .neo-currency-option-symbol,
body.dark-mode .neo-currency-option-symbol,
body.dark-theme .neo-currency-option-symbol,
body.theme-dark .neo-currency-option-symbol {
    background: color-mix(in srgb, var(--main-color, #8b5cf6) 16%, #111827);
}

/* بعد نقل العملة، مفتاح المظهر يملأ العرض في أسفل القائمة */
.neo-tools {
    grid-template-columns: 1fr !important;
}

.neo-theme-switch {
    width: 100%;
}

/* نحافظ على أبعاد الكمبيوتر الحالية؛ فقط نضبط الملاءمة على الشاشات الصغيرة */
@media (max-width: 390px) {
    .neo-currency-trigger {
        width: min(214px, calc(100% - 12px));
    }

    .neo-currency-dropdown {
        right: 4px;
        left: 4px;
    }
}

@media (max-width: 360px) {
    .neo-currency-trigger {
        grid-template-columns: 31px minmax(0, 1fr) 16px;
        gap: 6px;
        min-height: 40px;
        padding-inline: 8px 7px;
    }

    .neo-currency-swap-icon {
        width: 29px;
        height: 29px;
    }
}

/* ======================================================================
   KAYAN SIDEBAR V9 - عملة رصاصية + مظهر مخصص + سوشيال بلا مربعات
   ====================================================================== */

/* زر العملة الثانوية: رصاصي هادئ بدلاً من الأبيض مع الإبقاء على الظل ملغياً */
.neo-currency-trigger,
.neo-currency-trigger:hover,
.neo-currency-trigger:focus,
.neo-currency-trigger:focus-visible {
    background: #eef0f3 !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

.neo-currency-trigger:hover,
.neo-currency-trigger:focus-visible {
    background: #e5e7eb !important;
}

[data-theme="dark"] .neo-currency-trigger,
body.dark-mode .neo-currency-trigger,
body.dark-theme .neo-currency-trigger,
body.theme-dark .neo-currency-trigger {
    background: #252d39 !important;
    border: 0 !important;
    box-shadow: none !important;
}

[data-theme="dark"] .neo-currency-trigger:hover,
[data-theme="dark"] .neo-currency-trigger:focus-visible,
body.dark-mode .neo-currency-trigger:hover,
body.dark-theme .neo-currency-trigger:hover,
body.theme-dark .neo-currency-trigger:hover {
    background: #303a48 !important;
}

/* تكبير خط روابط القائمة بدرجة إضافية مع الحفاظ على المسافات المريحة */
.neo-menu {
    gap: 6px !important;
}

.neo-menu-link {
    min-height: 42px !important;
    padding: 6px 11px !important;
    font-size: .86rem !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
}

.neo-menu-icon {
    font-size: .78rem !important;
}

/* الفاصل يأتي مباشرة بعد آخر رابط ومنه تبدأ أدوات المظهر */
.neo-sidebar-bottom {
    margin-top: 5px !important;
    padding-top: 14px !important;
    border-top: 1px solid var(--neo-profile-line) !important;
}

.neo-tools {
    display: block !important;
}

/* إزالة المربع/السويتش القديم بالكامل وتصميم أيقونة مظهر مخصصة */
.neo-theme-switch {
    width: 100% !important;
    min-height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 4px 8px !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    color: var(--neo-sidebar-text) !important;
    background: transparent !important;
    box-shadow: none !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent;
}

.neo-theme-switch:hover,
.neo-theme-switch:focus,
.neo-theme-switch:focus-visible,
.neo-theme-switch:focus-within {
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.neo-theme-switch input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.neo-theme-switch small {
    min-width: 86px;
    color: var(--neo-sidebar-text) !important;
    font-size: .78rem !important;
    font-weight: 750 !important;
    line-height: 1.3 !important;
    text-align: right;
    white-space: nowrap;
}

.neo-theme-emblem {
    position: relative;
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 34px;
    color: #f59e0b;
    background: transparent !important;
    border: 0 !important;
    border-radius: 50%;
    box-shadow: none !important;
    transform: rotate(-7deg);
    transition: transform .28s ease, filter .28s ease;
}

.neo-theme-emblem::before {
    content: "";
    position: absolute;
    inset: 4px;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    opacity: .22;
    transform: rotate(18deg) scaleX(1.10);
    transition: transform .30s ease, opacity .30s ease;
}

.neo-theme-emblem::after {
    content: "✦";
    position: absolute;
    top: -1px;
    left: 0;
    color: #8b5cf6;
    font-size: .48rem;
    line-height: 1;
    text-shadow: 0 0 8px rgba(139, 92, 246, .40);
    transition: color .28s ease, transform .28s ease;
}

.neo-theme-emblem i {
    position: absolute;
    color: inherit !important;
    font-size: 1.03rem !important;
    line-height: 1;
    transition: opacity .25s ease, transform .32s cubic-bezier(.2,.8,.2,1), color .25s ease;
}

.neo-theme-sun {
    opacity: 1;
    transform: rotate(0deg) scale(1);
    filter: drop-shadow(0 3px 7px rgba(245, 158, 11, .28));
}

.neo-theme-moon {
    opacity: 0;
    transform: rotate(-45deg) scale(.55);
    color: #a78bfa !important;
    filter: drop-shadow(0 3px 7px rgba(139, 92, 246, .30));
}

.neo-theme-switch:hover .neo-theme-emblem,
.neo-theme-switch:focus-within .neo-theme-emblem {
    transform: rotate(0deg) scale(1.06);
    filter: saturate(1.08);
}

.neo-theme-switch input:checked + .neo-theme-emblem {
    color: #a78bfa;
    transform: rotate(7deg);
}

.neo-theme-switch input:checked + .neo-theme-emblem::before {
    opacity: .30;
    transform: rotate(-20deg) scaleX(1.12);
}

.neo-theme-switch input:checked + .neo-theme-emblem::after {
    color: #22d3ee;
    transform: translate(1px, 1px) rotate(18deg);
    text-shadow: 0 0 8px rgba(34, 211, 238, .45);
}

.neo-theme-switch input:checked + .neo-theme-emblem .neo-theme-sun {
    opacity: 0;
    transform: rotate(55deg) scale(.52);
}

.neo-theme-switch input:checked + .neo-theme-emblem .neo-theme-moon {
    opacity: 1;
    transform: rotate(-10deg) scale(1);
}

/* أيقونات التواصل مثل المرجع: بلا مربع خارجي وبلا خلفية لكل أيقونة */
.neo-socials {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    margin: 7px 0 0 !important;
    padding: 8px 4px 3px !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.neo-socials a,
[data-theme="dark"] .neo-socials a,
body.dark-mode .neo-socials a,
body.dark-theme .neo-socials a,
body.theme-dark .neo-socials a {
    width: 30px !important;
    height: 30px !important;
    display: grid !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 50% !important;
    outline: 0 !important;
    color: var(--social-color, #7c3aed) !important;
    background: transparent !important;
    box-shadow: none !important;
    text-decoration: none !important;
    transition: transform .18s ease, filter .18s ease !important;
}

.neo-socials a:hover,
.neo-socials a:focus-visible {
    transform: translateY(-2px) scale(1.08) !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: saturate(1.15);
}

.neo-socials i {
    color: inherit !important;
    font-size: 1.18rem !important;
}

/* تذييل الشركة الجديد */
.neo-company-footer {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 13px 5px 1px !important;
    color: var(--neo-sidebar-muted) !important;
    text-align: center;
}

.neo-company-logo {
    width: 96px;
    min-height: 38px;
    display: grid;
    place-items: center;
}

.neo-company-logo img {
    display: block;
    width: 96px;
    max-width: 100%;
    height: 40px;
    object-fit: contain;
    filter: none;
}

[data-theme="dark"] .neo-company-logo img,
body.dark-mode .neo-company-logo img,
body.dark-theme .neo-company-logo img,
body.theme-dark .neo-company-logo img {
    filter: drop-shadow(0 4px 9px rgba(0, 0, 0, .20));
}

.neo-company-credit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: .62rem;
    font-weight: 650;
    line-height: 1.35;
}

.neo-company-credit span {
    color: var(--neo-sidebar-muted);
}

.neo-company-credit a {
    color: #f2b705 !important;
    font-family: ui-sans-serif, system-ui, sans-serif;
    font-size: .66rem;
    font-weight: 900;
    letter-spacing: .25px;
    text-decoration: none !important;
    text-shadow: 0 3px 10px rgba(242, 183, 5, .18);
    transition: transform .18s ease, filter .18s ease;
}

.neo-company-credit a:hover,
.neo-company-credit a:focus-visible {
    transform: translateY(-1px);
    filter: brightness(1.04) saturate(1.10);
}

.neo-company-year {
    color: var(--neo-sidebar-muted) !important;
    font-family: ui-sans-serif, system-ui, sans-serif;
    font-size: .54rem !important;
    font-weight: 700;
    letter-spacing: .2px;
}

@media (max-width: 360px) {
    .neo-menu-link {
        min-height: 41px !important;
        font-size: .82rem !important;
    }

    .neo-theme-switch small {
        font-size: .74rem !important;
    }

    .neo-company-logo,
    .neo-company-logo img {
        width: 88px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .neo-theme-emblem,
    .neo-theme-emblem::before,
    .neo-theme-emblem::after,
    .neo-theme-emblem i,
    .neo-socials a {
        transition: none !important;
    }
}


/* ======================================================================
   KAYAN SIDEBAR V10 - أيقونة المظهر المتحركة + تحسين الهوية والخلفية
   ====================================================================== */

/* تغميق خفيف جداً لخلفية القائمة في الوضع الفاتح فقط */
:root {
    --neo-sidebar-bg: #f7f8fa;
    --neo-sidebar-bg-2: #f7f8fa;
    --neo-sidebar-card: #f7f8fa;
    --neo-tool-bg: transparent;
}

html:not([data-theme="dark"]) .side-nav,
html:not([data-theme="dark"]) .neo-sidebar-frame,
body.light-mode .side-nav,
body.light-mode .neo-sidebar-frame,
body.light-theme .side-nav,
body.light-theme .neo-sidebar-frame,
body.theme-light .side-nav,
body.theme-light .neo-sidebar-frame {
    background: #f7f8fa !important;
    background-color: #f7f8fa !important;
}

/* صف الوضع: بدون زر أو مسار؛ الأيقونة نفسها تنتقل من اليمين إلى اليسار */
.neo-theme-switch {
    position: relative !important;
    width: 100% !important;
    min-height: 46px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 5px 12px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.neo-theme-switch small {
    position: relative !important;
    z-index: 2 !important;
    min-width: 0 !important;
    margin: 0 !important;
    color: var(--neo-sidebar-text) !important;
    font-size: .82rem !important;
    font-weight: 800 !important;
    text-align: center !important;
    pointer-events: none !important;
}

.neo-theme-emblem {
    position: absolute !important;
    top: 50% !important;
    right: 13px !important;
    left: auto !important;
    width: 30px !important;
    height: 30px !important;
    display: grid !important;
    place-items: center !important;
    flex: 0 0 30px !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: translateY(-50%) !important;
    transition: right .34s cubic-bezier(.22,.82,.24,1), transform .25s ease, filter .25s ease !important;
    pointer-events: none !important;
}

/* إزالة أي دائرة أو زخرفة تجعل الأيقونة تبدو كزر */
.neo-theme-emblem::before,
.neo-theme-emblem::after {
    content: none !important;
    display: none !important;
}

.neo-theme-emblem i {
    position: absolute !important;
    display: block !important;
    font-size: 1.12rem !important;
    line-height: 1 !important;
    transition: opacity .24s ease, transform .30s cubic-bezier(.2,.8,.2,1), color .24s ease !important;
}

.neo-theme-sun {
    color: #f59e0b !important;
    opacity: 1 !important;
    transform: rotate(0deg) scale(1) !important;
    filter: drop-shadow(0 3px 7px rgba(245, 158, 11, .28)) !important;
}

.neo-theme-moon {
    color: #8b5cf6 !important;
    opacity: 0 !important;
    transform: rotate(-38deg) scale(.56) !important;
    filter: drop-shadow(0 3px 7px rgba(139, 92, 246, .30)) !important;
}

/* في الوضع الداكن تتحرك الأيقونة إلى الطرف الأيسر */
.neo-theme-switch input:checked + .neo-theme-emblem {
    right: calc(100% - 43px) !important;
    left: auto !important;
    color: #8b5cf6 !important;
    transform: translateY(-50%) !important;
}

.neo-theme-switch input:checked + .neo-theme-emblem .neo-theme-sun {
    opacity: 0 !important;
    transform: rotate(45deg) scale(.56) !important;
}

.neo-theme-switch input:checked + .neo-theme-emblem .neo-theme-moon {
    opacity: 1 !important;
    transform: rotate(-8deg) scale(1) !important;
}

.neo-theme-switch:hover .neo-theme-emblem,
.neo-theme-switch:focus-within .neo-theme-emblem {
    filter: saturate(1.12) !important;
}

/* تكبير شعار الشركة والنصوص أسفله بدرجة مريحة */
.neo-company-footer {
    gap: 6px !important;
    padding-top: 15px !important;
}

.neo-company-logo {
    width: 114px !important;
    min-height: 46px !important;
}

.neo-company-logo img {
    width: 114px !important;
    height: 48px !important;
    max-width: 100% !important;
    object-fit: contain !important;
}

.neo-company-credit {
    gap: 6px !important;
    font-size: .71rem !important;
    font-weight: 750 !important;
    line-height: 1.4 !important;
}

.neo-company-credit a {
    font-size: .75rem !important;
    font-weight: 900 !important;
}

.neo-company-year {
    font-size: .62rem !important;
    font-weight: 800 !important;
}

@media (max-width: 360px) {
    .neo-theme-switch {
        min-height: 44px !important;
        padding-inline: 10px !important;
    }

    .neo-theme-emblem {
        right: 11px !important;
    }

    .neo-theme-switch input:checked + .neo-theme-emblem {
        right: calc(100% - 41px) !important;
    }

    .neo-company-logo,
    .neo-company-logo img {
        width: 106px !important;
    }

    .neo-company-logo img {
        height: 45px !important;
    }
}

/* ======================================================================
   KAYAN SIDEBAR V11 - زر مظهر أصلي + خلفية المرجع + شعار الشركة 140px
   ====================================================================== */

/* خلفية القائمة الفاتحة طبقاً لقيمة ملف المرجع المرفوع */
:root {
    --neo-sidebar-bg: #ffffff;
    --neo-sidebar-bg-2: #ffffff;
    --neo-sidebar-card: #ffffff;
}

html:not([data-theme="dark"]) .side-nav,
html:not([data-theme="dark"]) .neo-sidebar-frame,
body.light-mode .side-nav,
body.light-mode .neo-sidebar-frame,
body.light-theme .side-nav,
body.light-theme .neo-sidebar-frame,
body.theme-light .side-nav,
body.theme-light .neo-sidebar-frame {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

/* زر المظهر: كبسولة مخصصة، وليست نسخة من زر الترس في المرجع */
.neo-theme-pill-switch {
    position: relative !important;
    width: 100% !important;
    min-height: 48px !important;
    display: flex !important;
    flex-direction: row !important;
    direction: ltr !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
    padding: 6px 10px !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent;
}

.neo-theme-pill-switch input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.neo-theme-pill-switch small {
    position: relative !important;
    z-index: 2 !important;
    min-width: 92px !important;
    margin: 0 !important;
    direction: rtl !important;
    color: var(--neo-sidebar-text) !important;
    font-size: .83rem !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    text-align: right !important;
    white-space: nowrap !important;
    pointer-events: none !important;
}

.neo-theme-pill {
    position: relative !important;
    width: 58px !important;
    height: 30px !important;
    flex: 0 0 58px !important;
    display: block !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #e8ebef 0%, #d9dee5 100%) !important;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, .08) !important;
    transition: background .28s ease, box-shadow .28s ease !important;
}

/* علامتان صغيرتان داخل المسار تمنحان الزر هوية خاصة */
.neo-theme-pill::before,
.neo-theme-pill::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    width: 4px !important;
    height: 4px !important;
    border-radius: 50% !important;
    background: rgba(100, 116, 139, .34) !important;
    transform: translateY(-50%) !important;
    transition: opacity .25s ease, background .25s ease !important;
}

.neo-theme-pill::before { left: 8px !important; }
.neo-theme-pill::after  { right: 8px !important; opacity: .20 !important; }

.neo-theme-pill-thumb {
    position: absolute !important;
    top: 3px !important;
    right: 3px !important;
    width: 24px !important;
    height: 24px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 48% 52% 50% 50% !important;
    background: #ffffff !important;
    box-shadow: 0 3px 10px rgba(15, 23, 42, .16) !important;
    transform: translateX(0) rotate(0deg) !important;
    transition: transform .32s cubic-bezier(.22,.82,.24,1), background .25s ease, box-shadow .25s ease !important;
    z-index: 2 !important;
}

.neo-theme-pill-thumb i {
    position: absolute !important;
    display: block !important;
    line-height: 1 !important;
    transition: opacity .22s ease, transform .30s ease, color .22s ease !important;
}

.neo-theme-pill-sun {
    color: #f59e0b !important;
    font-size: .78rem !important;
    opacity: 1 !important;
    transform: rotate(0deg) scale(1) !important;
}

.neo-theme-pill-moon {
    color: #7c3aed !important;
    font-size: .74rem !important;
    opacity: 0 !important;
    transform: rotate(-35deg) scale(.55) !important;
}

.neo-theme-pill-glint {
    position: absolute !important;
    top: 4px !important;
    right: 4px !important;
    width: 3px !important;
    height: 3px !important;
    border-radius: 50% !important;
    background: #fbbf24 !important;
    box-shadow: -4px 3px 0 -1px rgba(251, 191, 36, .78) !important;
    opacity: .92 !important;
    transition: opacity .22s ease, background .22s ease, box-shadow .22s ease !important;
}

.neo-theme-pill-switch input:checked ~ .neo-theme-pill {
    background: linear-gradient(135deg, #273244 0%, #182131 100%) !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .30) !important;
}

.neo-theme-pill-switch input:checked ~ .neo-theme-pill::before,
.neo-theme-pill-switch input:checked ~ .neo-theme-pill::after {
    background: rgba(226, 232, 240, .35) !important;
}

.neo-theme-pill-switch input:checked ~ .neo-theme-pill .neo-theme-pill-thumb {
    transform: translateX(-28px) rotate(-10deg) !important;
    background: #f8fafc !important;
    box-shadow: 0 3px 11px rgba(0, 0, 0, .28) !important;
}

.neo-theme-pill-switch input:checked ~ .neo-theme-pill .neo-theme-pill-sun {
    opacity: 0 !important;
    transform: rotate(45deg) scale(.55) !important;
}

.neo-theme-pill-switch input:checked ~ .neo-theme-pill .neo-theme-pill-moon {
    opacity: 1 !important;
    transform: rotate(-8deg) scale(1) !important;
}

.neo-theme-pill-switch input:checked ~ .neo-theme-pill .neo-theme-pill-glint {
    background: #a78bfa !important;
    box-shadow: -4px 3px 0 -1px rgba(167, 139, 250, .72) !important;
}

.neo-theme-pill-switch:hover .neo-theme-pill,
.neo-theme-pill-switch:focus-within .neo-theme-pill {
    filter: saturate(1.06) !important;
}

.neo-theme-pill-switch:focus-within .neo-theme-pill {
    outline: 2px solid color-mix(in srgb, var(--main-color, #7c3aed) 30%, transparent) !important;
    outline-offset: 2px !important;
}

/* اعتماد حجم شعار الشركة الموجود في الملف المرجعي: 140px */
.neo-company-footer {
    gap: 6px !important;
    padding-top: 15px !important;
}

.neo-company-logo {
    width: 140px !important;
    max-width: 88% !important;
    min-height: 54px !important;
}

.neo-company-logo img {
    width: 140px !important;
    max-width: 100% !important;
    height: 56px !important;
    object-fit: contain !important;
}

@media (max-width: 360px) {
    .neo-theme-pill-switch {
        gap: 11px !important;
        padding-inline: 8px !important;
    }

    .neo-theme-pill-switch small {
        min-width: 84px !important;
        font-size: .78rem !important;
    }

    .neo-company-logo,
    .neo-company-logo img {
        width: 132px !important;
    }

    .neo-company-logo img {
        height: 53px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .neo-theme-pill,
    .neo-theme-pill-thumb,
    .neo-theme-pill-thumb i,
    .neo-theme-pill-glint {
        transition: none !important;
    }
}

/* ======================================================================
   GUEST SIDEBAR AUTH CARD V12
   زر القائمة للزائر + بطاقة تسجيل الدخول الجديدة
   ====================================================================== */

/* زر الثلاث شرط للزائر: دائرة رصاصية واضحة وثلاث شرط بيضاء */
body.guest-mode #menu-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    outline: 0 !important;
    background: rgba(148, 163, 184, .42) !important;
    background-color: rgba(148, 163, 184, .42) !important;
    color: #ffffff !important;
    -webkit-mask: none !important;
    mask: none !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12) !important;
    font-size: 0 !important;
    cursor: pointer !important;
    transition: transform .16s ease, background-color .2s ease !important;
    -webkit-tap-highlight-color: transparent !important;
}

body.guest-mode #menu-btn i,
body.guest-mode #menu-btn .fa-bars {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    color: #ffffff !important;
    font-size: 15px !important;
    line-height: 1 !important;
    transform: none !important;
}

body.guest-mode #menu-btn:hover {
    background: rgba(148, 163, 184, .54) !important;
}

body.guest-mode #menu-btn:active {
    transform: scale(.92) !important;
    background: rgba(148, 163, 184, .60) !important;
}

/* بطاقة تسجيل الدخول للزائر */
.neo-guest-profile.neo-guest-auth-card {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    margin: 12px 0 10px !important;
    padding: 25px 16px 19px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    text-align: right !important;
    direction: rtl !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: linear-gradient(145deg, #111827 0%, #0f172a 58%, #111827 100%) !important;
    box-shadow: none !important;
}

.neo-guest-profile.neo-guest-auth-card::before {
    content: "" !important;
    position: absolute !important;
    top: -44px !important;
    left: -34px !important;
    width: 118px !important;
    height: 118px !important;
    border-radius: 50% !important;
    background: rgba(59, 130, 246, .08) !important;
    pointer-events: none !important;
}

.neo-guest-auth-copy,
.neo-guest-auth-actions {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
}

.neo-guest-profile.neo-guest-auth-card h3 {
    margin: 0 0 8px !important;
    padding: 0 !important;
    color: #ffffff !important;
    font-size: 1.03rem !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
    text-align: right !important;
}

.neo-guest-profile.neo-guest-auth-card p {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #cbd5e1 !important;
    font-size: .72rem !important;
    font-weight: 500 !important;
    line-height: 1.7 !important;
    text-align: right !important;
}

.neo-guest-auth-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-top: 16px !important;
}

.neo-guest-profile.neo-guest-auth-card .neo-login-primary,
.neo-guest-profile.neo-guest-auth-card .neo-login-google {
    position: relative !important;
    width: 100% !important;
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    margin: 0 !important;
    padding: 8px 14px !important;
    box-sizing: border-box !important;
    border-radius: 999px !important;
    text-decoration: none !important;
    font-family: 'Tajawal', sans-serif !important;
    font-size: .75rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    transition: transform .18s ease, filter .18s ease, background-color .18s ease !important;
}

.neo-guest-profile.neo-guest-auth-card .neo-login-primary {
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,.04) !important;
    background: #020617 !important;
    box-shadow: none !important;
}

.neo-guest-profile.neo-guest-auth-card .neo-login-google {
    color: #111827 !important;
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

.neo-guest-profile.neo-guest-auth-card .neo-login-primary i {
    color: #ffffff !important;
    font-size: .83rem !important;
}

.neo-guest-profile.neo-guest-auth-card .neo-login-google i {
    color: #4285f4 !important;
    font-size: .88rem !important;
}

.neo-guest-profile.neo-guest-auth-card .neo-login-primary:hover,
.neo-guest-profile.neo-guest-auth-card .neo-login-google:hover {
    transform: translateY(-1px) !important;
    filter: brightness(1.04) !important;
}

.neo-guest-profile.neo-guest-auth-card .neo-login-primary:active,
.neo-guest-profile.neo-guest-auth-card .neo-login-google:active {
    transform: scale(.985) !important;
}

/* نفس البطاقة في الوضع الداكن مع الحفاظ على وضوح الحدود */
[data-theme="dark"] .neo-guest-profile.neo-guest-auth-card,
body.dark-mode .neo-guest-profile.neo-guest-auth-card,
body.dark-theme .neo-guest-profile.neo-guest-auth-card,
body.theme-dark .neo-guest-profile.neo-guest-auth-card {
    background: linear-gradient(145deg, #111827 0%, #0b1220 100%) !important;
    border: 1px solid rgba(148, 163, 184, .10) !important;
}

@media (max-width: 380px) {
    .neo-guest-profile.neo-guest-auth-card {
        padding: 22px 14px 17px !important;
        border-radius: 15px !important;
    }

    .neo-guest-profile.neo-guest-auth-card h3 {
        font-size: .98rem !important;
    }

    .neo-guest-profile.neo-guest-auth-card p {
        font-size: .68rem !important;
    }
}

/* ======================================================================
   KAYAN SIDEBAR V13
   - منطقة ضغط كاملة لمفتاح المظهر
   - ربط الهيدر والأزرار بألوان لوحة التصميم
   - تذييل شفاف وشعار أكبر
   - معالجة الفاصل الملون أعلى القائمة على iOS/Android
   ====================================================================== */

/* الهيدر يعتمد مباشرة على القيم التي يولدها ملف topbar-color.css من لوحة الأدمن */
.main-header,
html.pwa-standalone .main-header,
[data-theme="dark"] .main-header,
body.dark-mode .main-header,
body.dark-theme .main-header,
body.theme-dark .main-header {
    background: var(--header-bg, var(--main-color, #2ecc71)) !important;
    background-color: var(--main-color, #2ecc71) !important;
    border: 0 !important;
    border-bottom: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background-clip: border-box !important;
}

/* ألوان عناصر الهيدر تتبع لون الرصيد/النص المحدد للوضع الحالي */
#menu-btn,
body.guest-mode #menu-btn {
    color: var(--header-balance-color, #ffffff) !important;
    background: color-mix(in srgb, var(--header-balance-color, #ffffff) 19%, transparent) !important;
    background-color: color-mix(in srgb, var(--header-balance-color, #ffffff) 19%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--header-balance-color, #ffffff) 14%, transparent) !important;
    box-shadow: none !important;
}

#menu-btn i,
body.guest-mode #menu-btn i,
body.guest-mode #menu-btn .fa-bars,
.notif-bell,
.back-btn-header,
.user-link {
    color: var(--header-balance-color, #ffffff) !important;
}

.header-balance-btn {
    color: var(--header-balance-color, #ffffff) !important;
    background: color-mix(in srgb, var(--header-balance-color, #ffffff) 10%, transparent) !important;
    border-color: color-mix(in srgb, var(--header-balance-color, #ffffff) 30%, transparent) !important;
    box-shadow: none !important;
}

.header-balance-btn::before {
    background-color: var(--auth-color, var(--main-color, #2ecc71)) !important;
}

/* أزرار الدخول والأزرار العامة تتبع لون الأزرار من لوحة التصميم */
.neo-guest-profile.neo-guest-auth-card .neo-login-primary,
.btn-green-sidebar,
.btn-green-login,
.btn-primary,
.main-btn {
    background: var(--auth-color, var(--main-color, #2ecc71)) !important;
    background-color: var(--auth-color, var(--main-color, #2ecc71)) !important;
    border-color: var(--auth-color, var(--main-color, #2ecc71)) !important;
    color: #ffffff !important;
}

.neo-guest-profile.neo-guest-auth-card .neo-login-primary:hover,
.btn-green-sidebar:hover,
.btn-green-login:hover,
.btn-primary:hover,
.main-btn:hover {
    filter: brightness(.94) saturate(1.04) !important;
}

/* ربط ألوان القائمة الداكنة بالكامل بإعدادات الوضع الداكن التي يولدها الأدمن */
[data-theme="dark"],
body.dark-mode,
body.dark-theme,
body.theme-dark {
    --neo-sidebar-bg: var(--bg-side, var(--section-bg, #0f172a));
    --neo-sidebar-bg-2: var(--section-bg, #0f172a);
    --neo-sidebar-card: var(--card-bg, #111827);
    --neo-sidebar-line: var(--border-color, #334155);
    --neo-sidebar-text: var(--text-color, #f8fafc);
    --neo-sidebar-muted: var(--muted-text-color, #cbd5e1);
    --neo-profile-line: color-mix(in srgb, var(--border-color, #334155) 72%, transparent);
    --neo-item-hover: color-mix(in srgb, var(--text-color, #f8fafc) 7%, transparent);
    --neo-item-active: var(--sidebar-active-bg, #1f2937);
    --neo-tool-bg: var(--card-bg, #111827);
    --neo-tool-border: var(--border-color, #334155);
    --neo-social-bg: color-mix(in srgb, var(--text-color, #f8fafc) 6%, transparent);
    --neo-avatar-inner: var(--card-bg, #111827);
    --neo-avatar-status-border: var(--section-bg, #0f172a);
}

[data-theme="dark"] .neo-sidebar-frame,
body.dark-mode .neo-sidebar-frame,
body.dark-theme .neo-sidebar-frame,
body.theme-dark .neo-sidebar-frame,
[data-theme="dark"] .side-nav,
body.dark-mode .side-nav,
body.dark-theme .side-nav,
body.theme-dark .side-nav {
    background: var(--bg-side, var(--section-bg, #0f172a)) !important;
    background-color: var(--bg-side, var(--section-bg, #0f172a)) !important;
    color: var(--text-color, #f8fafc) !important;
    border-color: var(--border-color, #334155) !important;
}

[data-theme="dark"] .neo-menu-link.active-link,
body.dark-mode .neo-menu-link.active-link,
body.dark-theme .neo-menu-link.active-link,
body.theme-dark .neo-menu-link.active-link {
    background: var(--sidebar-active-bg, #1f2937) !important;
    color: var(--text-color, #f8fafc) !important;
}

/* مفتاح المظهر: كل المساحة والأيقونة نفسها قابلة للضغط */
.neo-theme-pill-switch {
    touch-action: manipulation !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

.neo-theme-pill,
.neo-theme-pill *,
.neo-theme-pill-thumb,
.neo-theme-pill-thumb * {
    pointer-events: none !important;
}

.neo-theme-pill {
    background: color-mix(in srgb, var(--muted-text-color, #64748b) 20%, var(--section-bg, #ffffff)) !important;
    box-shadow: inset 0 1px 2px color-mix(in srgb, var(--text-color, #1e293b) 9%, transparent) !important;
}

.neo-theme-pill-switch input:checked ~ .neo-theme-pill {
    background: color-mix(in srgb, var(--main-color, #0f172a) 78%, var(--card-bg, #111827)) !important;
}

/* إزالة أي بطاقة أو مستطيل خلف الشعار وعبارات حقوق التصميم */
.neo-sidebar-bottom,
.neo-footer,
.neo-company-footer,
.neo-company-footer::before,
.neo-company-footer::after,
.neo-company-logo,
.neo-company-logo::before,
.neo-company-logo::after,
.neo-company-logo img,
.neo-company-credit,
.neo-company-credit::before,
.neo-company-credit::after,
.neo-company-year {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

.neo-company-footer {
    width: 100% !important;
    margin: 0 !important;
    padding: 16px 0 2px !important;
    overflow: visible !important;
}

/* تكبير واضح للشعار؛ الصورة تظل داخل عرض القائمة بدون قص */
.neo-company-logo {
    width: 194px !important;
    max-width: 96% !important;
    min-height: 82px !important;
}

.neo-company-logo img {
    display: block !important;
    width: 194px !important;
    max-width: 100% !important;
    height: 84px !important;
    object-fit: contain !important;
    filter: none !important;
}

.neo-company-credit {
    font-size: .75rem !important;
    font-weight: 800 !important;
}

.neo-company-credit a {
    font-size: .80rem !important;
}

.neo-company-year {
    font-size: .67rem !important;
    font-weight: 800 !important;
}

/* علاج ظهور شريط/فاصل من لون الهيدر أعلى القائمة في متصفحات الهواتف */
@media (max-width: 899.98px) {
    .side-nav,
    .side-nav.open {
        top: 0 !important;
        bottom: 0 !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        background: var(--neo-sidebar-bg, var(--section-bg, #ffffff)) !important;
        background-color: var(--neo-sidebar-bg, var(--section-bg, #ffffff)) !important;
        background-clip: border-box !important;
        transform: translateZ(0) !important;
        -webkit-transform: translateZ(0) !important;
    }

    .side-nav.open::before {
        content: "" !important;
        position: absolute !important;
        z-index: 2147483646 !important;
        top: -3px !important;
        right: 0 !important;
        left: 0 !important;
        height: 7px !important;
        background: var(--neo-sidebar-bg, var(--section-bg, #ffffff)) !important;
        pointer-events: none !important;
    }

    .neo-sidebar-frame {
        min-height: 100% !important;
        background-clip: border-box !important;
    }
}

html.ios-device .side-nav,
html.ios-device .side-nav.open {
    top: 0 !important;
    bottom: 0 !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
}

html.ios-device .neo-sidebar-frame {
    padding-top: max(env(safe-area-inset-top, 0px), 0px) !important;
    padding-bottom: max(calc(14px + env(safe-area-inset-bottom, 0px)), 14px) !important;
}

@media (max-width: 360px) {
    .neo-company-logo,
    .neo-company-logo img {
        width: 178px !important;
    }

    .neo-company-logo {
        min-height: 75px !important;
    }

    .neo-company-logo img {
        height: 77px !important;
    }
}


/* ======================================================================
   KAYAN SIDEBAR V14 — إصلاح الشريط الملون أعلى أندرويد
   ====================================================================== */

@media (max-width: 899.98px) {
    .side-nav,
    .side-nav.open {
        top: 0 !important;
        inset-block-start: 0 !important;
        bottom: 0 !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        border-top: 0 !important;
        outline: 0 !important;
    }

    /* غطاء بلون القائمة نفسها بدل ظهور لون الهيدر عند أول بكسلات الشاشة. */
    .side-nav.open::before {
        top: 0 !important;
        height: 3px !important;
        background: var(--neo-sidebar-bg, var(--section-bg, #ffffff)) !important;
    }
}

/* إلغاء طبقة الثمانية بكسلات القديمة التي كانت تعلو الهيدر والقائمة على أندرويد. */
html.pwa-android-standalone body::after {
    content: none !important;
    display: none !important;
    height: 0 !important;
    background: transparent !important;
}

/* كروم العادي يبدأ الهيدر من أعلى الـ viewport بلا مسافات PWA. */
html:not(.pwa-standalone) .main-header {
    top: 0 !important;
    padding-top: 0 !important;
    height: var(--header-height, 57px) !important;
}


/* ======================================================================
   KAYAN SIDEBAR V15 - إعادة الفاصل بين روابط القائمة وأدوات المظهر
   ====================================================================== */
.neo-section-divider {
    display: block !important;
    width: calc(100% - 30px) !important;
    height: 1px !important;
    min-height: 1px !important;
    margin: 12px 15px 4px !important;
    padding: 0 !important;
    border: 0 !important;
    background-color: #d9dee6 !important;
    opacity: 1 !important;
    flex: 0 0 1px !important;
    box-sizing: border-box !important;
}

[data-theme="dark"] .neo-section-divider,
body.dark-mode .neo-section-divider,
body.dark-theme .neo-section-divider,
body.theme-dark .neo-section-divider {
    background-color: var(--border-color, #334155) !important;
}

/* الفاصل أصبح عنصراً مستقلاً، لذلك نلغي الحد القديم لمنع ظهوره مزدوجاً */
.neo-sidebar-bottom {
    border-top: 0 !important;
    padding-top: 10px !important;
}

/* ======================================================================
   KAYAN SIDEBAR V16 - تثبيت كود العملة داخل الكبسولة وترتيب الرصيد
   ====================================================================== */

/* الكبسولة بالكامل تظل داخل حدود القائمة، والكود بجوار اسم العملة */
.neo-currency-trigger {
    width: min(230px, calc(100% - 18px)) !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 11px !important;
    padding: 5px 14px !important;
    direction: rtl !important;
    overflow: hidden !important;
}

.neo-currency-swap-icon {
    flex: 0 0 25px !important;
}

.neo-currency-copy {
    min-width: 0 !important;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    white-space: nowrap !important;
    direction: rtl !important;
}

.neo-currency-label,
.neo-currency-code {
    min-width: 0 !important;
    margin: 0 !important;
    position: static !important;
    transform: none !important;
    flex: 0 0 auto !important;
}

.neo-currency-code {
    text-align: center !important;
    direction: ltr !important;
    unicode-bidi: isolate !important;
}

/* تثبيت رمز العملة بصرياً على اليسار والرقم على اليمين */
.neo-balance-value,
.header-balance-value {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    justify-content: center !important;
    gap: 4px !important;
    direction: ltr !important;
    unicode-bidi: isolate !important;
    white-space: nowrap !important;
}

.neo-balance-number,
.header-balance-number {
    order: 2 !important;
    direction: ltr !important;
    unicode-bidi: isolate !important;
}

.neo-balance-symbol,
.header-balance-symbol {
    order: 1 !important;
    direction: rtl !important;
    unicode-bidi: isolate !important;
    white-space: nowrap !important;
}

/* ==================================================
   التعديل الأخير: جعل علامة الإضافة داخل رصيد الهيدر بيضاء
================================================== */
.header-balance-btn::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M19 11h-6V5h-2v6H5v2h6v6h2v-6h6v-2z'/%3E%3C/svg%3E") !important;
    filter: none !important;
}

/* ======================================================================
   KAYAN HEADER V19 - هيدر موبايل مضغوط بدون تشويه الشكل
   يقلل الارتفاع والمسافات على أندرويد و iOS في المتصفح العادي فقط.
   ====================================================================== */
@media (max-width: 899.98px) {
    /* تقليل المساحة الرأسية التي كان الهيدر يحجزها فوق البانر */
    html:not(.pwa-standalone) body {
        padding-top: 57px !important;
    }

    html:not(.pwa-standalone) body .main-header {
        top: 0 !important;
        height: 57px !important;
        min-height: 57px !important;
        padding: 0 9px 0 8px !important;
        box-sizing: border-box !important;
    }

    /* ضم عناصر الجانب الأيمن بدون تزاحم */
    html:not(.pwa-standalone) body .header-icons {
        gap: 7px !important;
        min-width: 0 !important;
        height: 57px !important;
    }

    html:not(.pwa-standalone) body #menu-btn {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        flex: 0 0 32px !important;
    }

    html:not(.pwa-standalone) body #menu-btn i {
        font-size: 14px !important;
    }

    html:not(.pwa-standalone) body .header-balance-btn {
        height: 28px !important;
        min-height: 28px !important;
        padding: 0 8px !important;
        margin: 0 !important;
        gap: 4px !important;
        font-size: .76rem !important;
        line-height: 1 !important;
        flex: 0 1 auto !important;
        white-space: nowrap !important;
    }

    html:not(.pwa-standalone) body .header-balance-btn::before {
        width: 13px !important;
        height: 13px !important;
        min-width: 13px !important;
        margin-right: 4px !important;
        background-size: 8px 8px !important;
    }

    html:not(.pwa-standalone) body .header-balance-value {
        gap: 3px !important;
        line-height: 1 !important;
    }

    html:not(.pwa-standalone) body .header-vip-badge-link {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        margin: 0 1px !important;
        box-shadow: none !important;
    }

    html:not(.pwa-standalone) body .notif-bell {
        font-size: .96rem !important;
        margin: 0 1px !important;
        min-width: 19px !important;
    }

    html:not(.pwa-standalone) body .header-left-side {
        gap: 7px !important;
        height: 57px !important;
        padding-left: 7px !important;
        min-width: 0 !important;
    }

    html:not(.pwa-standalone) body .logo-container,
    html:not(.pwa-standalone) body .logo-container a {
        height: 57px !important;
        display: flex !important;
        align-items: center !important;
    }

    html:not(.pwa-standalone) body .logo-container img {
        height: 25px !important;
        max-height: 25px !important;
        width: auto !important;
        filter: none !important;
    }

    html:not(.pwa-standalone) body .back-btn-header {
        font-size: 1rem !important;
        margin-left: 1px !important;
    }
}

/* ضغط إضافي بسيط جداً للشاشات الضيقة حتى لا تتداخل العناصر */
@media (max-width: 390px) {
    html:not(.pwa-standalone) body .main-header {
        padding-right: 7px !important;
        padding-left: 6px !important;
    }

    html:not(.pwa-standalone) body .header-icons {
        gap: 5px !important;
    }

    html:not(.pwa-standalone) body #menu-btn {
        width: 31px !important;
        height: 31px !important;
        min-width: 31px !important;
        flex-basis: 31px !important;
    }

    html:not(.pwa-standalone) body .header-balance-btn {
        padding-inline: 6px !important;
        font-size: .72rem !important;
    }

    html:not(.pwa-standalone) body .header-vip-badge-link {
        width: 23px !important;
        height: 23px !important;
        min-width: 23px !important;
    }

    html:not(.pwa-standalone) body .logo-container img {
        height: 23px !important;
        max-height: 23px !important;
    }
}

/* ======================================================================
   KAYAN HEADER LOGIN ICON
   دائرة رصاصي خفيفة حول أيقونة تسجيل الدخول للزائر
   ====================================================================== */
body.guest-mode .user-link,
html:not(.user-logged-in) body.guest-mode .user-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    flex: 0 0 34px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 50% !important;
    background: rgba(148, 163, 184, 0.28) !important;
    background-color: rgba(148, 163, 184, 0.28) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    box-shadow: none !important;
    color: var(--header-balance-color, #ffffff) !important;
    text-decoration: none !important;
    overflow: hidden !important;
    -webkit-mask: none !important;
    mask: none !important;
    transform: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

body.guest-mode .user-link i,
html:not(.user-logged-in) body.guest-mode .user-link i {
    display: block !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--header-balance-color, #ffffff) !important;
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free" !important;
    font-size: 15px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    opacity: 1 !important;
    transform: none !important;
}

body.guest-mode .user-link:hover {
    background: rgba(148, 163, 184, 0.38) !important;
    background-color: rgba(148, 163, 184, 0.38) !important;
}

body.guest-mode .user-link:active {
    transform: scale(0.92) !important;
    opacity: 0.85 !important;
}

[data-theme="dark"] body.guest-mode .user-link,
body.dark-mode.guest-mode .user-link,
body.dark-theme.guest-mode .user-link,
body.theme-dark.guest-mode .user-link {
    background: rgba(148, 163, 184, 0.22) !important;
    background-color: rgba(148, 163, 184, 0.22) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* ======================================================================
   KAYAN AVATAR BELL
   جرس إشعارات صغير معلّق بجانب صورة الحساب
   ====================================================================== */
.main-header .notif-bell {
    display: none !important;
}

.neo-avatar-zone {
    position: relative;
    width: 58px;
    height: 58px;
    margin-bottom: 9px;
    flex: 0 0 58px;
}

.neo-avatar-zone .neo-avatar {
    width: 58px !important;
    height: 58px !important;
    margin: 0 !important;
}

.neo-avatar-bell {
    position: absolute;
    top: -6px;
    left: -17px;
    z-index: 8;
    width: 31px;
    height: 31px;
    min-width: 31px;
    min-height: 31px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 50% !important;
    box-sizing: border-box;
    color: #5b21b6 !important;
    background: #eef0f4 !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 5px 13px rgba(15, 23, 42, .13) !important;
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent;
    transition:
        transform .18s ease,
        background-color .18s ease,
        color .18s ease;
}

.neo-avatar-bell i {
    display: block !important;
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free" !important;
    font-size: .78rem !important;
    font-style: normal !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    opacity: 1 !important;
    transform: none !important;
}

.neo-avatar-bell:hover,
.neo-avatar-bell:focus-visible,
.neo-avatar-bell.is-active {
    color: #ffffff !important;
    background: linear-gradient(145deg, #8b5cf6 0%, #5b21b6 100%) !important;
    transform: translateY(-1px) scale(1.04);
    outline: none !important;
}

.neo-avatar-bell:active {
    transform: scale(.92);
}

.neo-avatar-bell-count {
    position: absolute;
    top: -5px;
    right: -6px;
    z-index: 3;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-radius: 999px;
    color: #ffffff !important;
    background: #ef4444 !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 4px 9px rgba(239, 68, 68, .24);
    font-size: .48rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    font-family: 'Tajawal', sans-serif !important;
}

.neo-avatar-bell.has-unread {
    animation: neoAvatarBellAttention 2.3s ease-in-out infinite;
}

@keyframes neoAvatarBellAttention {
    0%, 80%, 100% {
        transform: rotate(0deg);
    }
    84% {
        transform: rotate(-8deg);
    }
    88% {
        transform: rotate(8deg);
    }
    92% {
        transform: rotate(-5deg);
    }
    96% {
        transform: rotate(5deg);
    }
}

[data-theme="dark"] .neo-avatar-bell,
body.dark-mode .neo-avatar-bell,
body.dark-theme .neo-avatar-bell,
body.theme-dark .neo-avatar-bell {
    color: #ddd6fe !important;
    background: #1f2937 !important;
    border-color: #111827 !important;
    box-shadow: 0 5px 13px rgba(0, 0, 0, .30) !important;
}

[data-theme="dark"] .neo-avatar-bell:hover,
[data-theme="dark"] .neo-avatar-bell:focus-visible,
[data-theme="dark"] .neo-avatar-bell.is-active,
body.dark-mode .neo-avatar-bell:hover,
body.dark-theme .neo-avatar-bell:hover,
body.theme-dark .neo-avatar-bell:hover {
    color: #ffffff !important;
    background: linear-gradient(145deg, #8b5cf6 0%, #5b21b6 100%) !important;
}

[data-theme="dark"] .neo-avatar-bell-count,
body.dark-mode .neo-avatar-bell-count,
body.dark-theme .neo-avatar-bell-count,
body.theme-dark .neo-avatar-bell-count {
    border-color: #111827 !important;
}

@media (max-width: 360px) {
    .neo-avatar-bell {
        top: -5px;
        left: -15px;
        width: 29px;
        height: 29px;
        min-width: 29px;
        min-height: 29px;
    }

    .neo-avatar-bell i {
        font-size: .73rem !important;
    }
}

/* PWA and preloader extracted from header.php */
html.pwa-standalone {
            background: var(--header-bg, var(--pwa-status-bg)) !important;
            background-color: var(--pwa-status-color) !important;
            background-size: 100vw calc(var(--header-height, 56px) + env(safe-area-inset-top, 0px) + 4px) !important;
            background-position: top center !important;
            background-repeat: no-repeat !important;
        }
        html.pwa-standalone body {
            padding-top: calc(var(--header-height, 56px) + env(safe-area-inset-top, 0px)) !important;
            background-color: var(--site-bg, #ffffff) !important;
        }
        html.pwa-standalone body::before {
            content: "";
            position: fixed;
            top: -2px;
            left: 0;
            right: 0;
            height: calc(env(safe-area-inset-top, 0px) + 4px);
            background: var(--header-bg, var(--pwa-status-bg)) !important;
            background-color: var(--pwa-status-color) !important;
            background-size: 100vw calc(var(--header-height, 56px) + env(safe-area-inset-top, 0px) + 4px) !important;
            background-position: top center !important;
            background-repeat: no-repeat !important;
            z-index: 9999998;
            pointer-events: none;
        }
        html.pwa-standalone .main-header {
            top: -2px !important;
            padding-top: calc(env(safe-area-inset-top, 0px) + 2px) !important;
            height: calc(var(--header-height, 56px) + env(safe-area-inset-top, 0px) + 2px) !important;
            background: var(--header-bg, var(--pwa-status-bg)) !important;
            background-color: var(--pwa-status-color) !important;
            background-size: 100vw calc(var(--header-height, 56px) + env(safe-area-inset-top, 0px) + 4px) !important;
            background-position: top center !important;
            background-repeat: no-repeat !important;
            border-top: 0 !important;
            background-clip: border-box !important;
            box-sizing: border-box !important;
        }
        html.pwa-android-standalone .main-header {
            border-top: 0 !important;
            outline: 0 !important;
        }
        /* لا نرسم شريطًا يدويًا أعلى أندرويد؛ لون المتصفح والهيدر يكفيان. */
        html.pwa-android-standalone body::after {
            content: none !important;
            display: none !important;
        }
        html.pwa-standalone #site-toast-container {
            top: calc(75px + env(safe-area-inset-top, 0px)) !important;
        }
        #global-preloader {
            position: fixed !important;
            top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important;
            background-color: color-mix(in srgb, var(--site-bg, #ffffff) 98%, transparent) !important;
            z-index: 999999999 !important;
            display: flex !important; justify-content: center !important; align-items: center !important;
            transition: opacity 0.3s ease-out, visibility 0.3s ease-out !important;
        }
        [data-theme="dark"] #global-preloader { background-color: color-mix(in srgb, var(--site-bg, #0c1719) 98%, transparent) !important; }
        .loader-wrapper { position: relative; width: 90px; height: 90px; display: flex; justify-content: center; align-items: center; background: transparent; }
        .spinner-ring { position: absolute; width: 100%; height: 100%; border: 3.5px solid color-mix(in srgb, var(--text-color, #000000) 8%, transparent); border-top-color: var(--main-color, var(--header-auth-color, #2ecc71)) !important; border-right-color: var(--main-color, var(--header-auth-color, #2ecc71)) !important; border-radius: 50%; animation: spin-loader 0.8s linear infinite; }
        [data-theme="dark"] .spinner-ring { border-color: color-mix(in srgb, var(--text-color, #ffffff) 8%, transparent); border-top-color: var(--main-color, var(--header-auth-color, #2ecc71)) !important; border-right-color: var(--main-color, var(--header-auth-color, #2ecc71)) !important; }
        .loader-logo { width: 50px; height: auto; z-index: 10; filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.15)); animation: pulse-logo 1.5s ease-in-out infinite alternate; }
        @keyframes spin-loader { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
        @keyframes pulse-logo { 0% { transform: scale(0.92); opacity: 0.85; } 100% { transform: scale(1.08); opacity: 1; } }
        .preloader-hidden { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
        body.loading-active { overflow: hidden !important; }

/* Extra header rules extracted from header.php */
.side-nav { z-index: 20000000 !important; justify-content: flex-start !important; align-content: flex-start !important; }
        .nav-links-sidebar a, .nav-links-sidebar a span { font-weight: 400 !important; }

        .sidebar-balance-pill {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            text-decoration: none;
            border: 1.5px solid #9ca3af !important;
            border-radius: 50px !important;
            padding: 2px 12px !important; 
            font-size: 1.15rem !important;
            font-weight: 600 !important;
            color: var(--balance-color, var(--main-color, #0d6efd)) !important;
            transition: 0.3s;
        }
        [data-theme="dark"] .sidebar-balance-pill,
        body.dark-mode .sidebar-balance-pill,
        body.dark-theme .sidebar-balance-pill,
        body.theme-dark .sidebar-balance-pill {
            border: 1.5px solid rgba(255, 255, 255, 0.45) !important;
        }
        .sidebar-balance-pill:hover { background: rgba(0, 0, 0, 0.03); }
        [data-theme="dark"] .sidebar-balance-pill:hover { background: rgba(255, 255, 255, 0.05); }
        .sidebar-balance-pill.debt { color: #ef4444 !important; border-color: rgba(239, 68, 68, 0.4) !important; }

        .header-balance-btn.debt { color: #ef4444 !important; border-color: rgba(239, 68, 68, 0.3) !important; }
        
        .sidebar-username-container { display: flex; align-items: center; justify-content: center; gap: 15px; width: 100%; margin-top: 8px; padding: 0 5px; box-sizing: border-box; }
        .user-info-group { display: flex; align-items: center; gap: 6px; flex-shrink: 1; min-width: 0; }
        .user-id-muted { font-size: 0.85rem; font-weight: 500; color: #94a3b8; flex-shrink: 0; direction: ltr; }
        .sidebar-name-text { font-size: 0.95rem; font-weight: 600; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 110px; }
        .verified-badge-sidebar { color: #3b82f6; font-size: 0.85rem; flex-shrink: 0; }
        .sidebar-badge-inline { font-size: 0.75rem; font-weight: 600; padding: 2px 8px; border-radius: 50px; white-space: nowrap; flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; background: rgba(37, 99, 235, 0.08); color: #2563eb; border: 1px solid rgba(37, 99, 235, 0.15); cursor: default; pointer-events: none; }
        .sidebar-badge-inline img { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; }

        .force-divider { width: 85% !important; height: 1px !important; min-height: 1px !important; background-color: rgba(150, 150, 150, 0.3) !important; margin: 15px auto !important; display: block !important; visibility: visible !important; border: none !important; flex-shrink: 0 !important; }
        .side-nav > .nav-links-sidebar { flex: 0 0 auto !important; margin-bottom: 0 !important; }
        .side-nav > .force-divider { flex: 0 0 auto !important; margin-top: 15px !important; margin-right: auto !important; margin-bottom: 15px !important; margin-left: auto !important; }
        .side-nav > .modern-theme-section, .side-nav > .sidebar-socials, .side-nav > .sidebar-footer-brand { flex: 0 0 auto !important; }
        [data-theme="dark"] .force-divider { background-color: rgba(255, 255, 255, 0.1) !important; }

        .modern-theme-section { display: flex !important; justify-content: center !important; align-items: center !important; gap: 12px !important; padding: 10px 15px !important; margin: 0 10px 15px 10px !important; background: transparent !important; border: none !important; visibility: visible !important; flex-shrink: 0 !important; }
        .theme-text-thin { font-weight: 400 !important; font-size: 0.9rem !important; color: var(--text-main) !important; margin: 0 !important; }

        .unique-switch { position: relative; display: inline-block; width: 50px; height: 26px; margin: 0; flex-shrink: 0 !important; }
        .unique-switch input { opacity: 0; width: 0; height: 0; }
        .unique-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #e2e8f0; transition: .4s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 34px; display: flex; align-items: center; justify-content: space-between; padding: 0 4px; border: 1px solid rgba(0,0,0,0.05); }
        .unique-sun-icon, .unique-moon-icon { font-size: 11px; transition: .3s; }
        .unique-sun-icon { color: #f59e0b; opacity: 1; } 
        .unique-moon-icon { color: #94a3b8; opacity: 0; } 
        .unique-slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 3px; bottom: 2px; background-color: 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 + .unique-slider { background-color: #2dd4bf; border-color: rgba(255,255,255,0.05); }
        input:checked + .unique-slider:before { transform: translateX(24px); }
        input:checked + .unique-slider .unique-sun-icon { opacity: 0; }
        input:checked + .unique-slider .unique-moon-icon { opacity: 1; color: #fff; }

        #site-toast-container { position: fixed; top: 75px; left: 50%; transform: translateX(-50%); z-index: 9999999; width: 92%; max-width: 400px; pointer-events: none; display: flex; flex-direction: column; gap: 10px; }
        .site-toast { padding: 14px 16px; border-radius: 10px; color: #fff; font-weight: 600; font-size: 0.85rem; box-shadow: 0 10px 25px rgba(0,0,0,0.15); display: flex; align-items: center; gap: 10px; direction: rtl; animation: toastSlideDown 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; pointer-events: auto; }
        .site-toast.success { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }
        .site-toast.error { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); }
        .site-toast.info { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); }
        .site-toast i { font-size: 1.2rem; }
        @keyframes toastSlideDown { from { opacity: 0; transform: translateY(-40px) scale(0.9); } to { opacity: 1; transform: translateY(0) scale(1); } }
        @keyframes toastFadeOut { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(-20px) scale(0.9); } }

        .sidebar-socials {
            display: flex !important;
            flex-direction: row !important;
            flex-wrap: wrap !important;
            justify-content: center !important;
            align-items: center !important;
            gap: 12px !important;
            padding: 10px !important;
            margin: 10px auto !important;
            width: 100% !important;
            box-sizing: border-box !important;
        }
        .sidebar-socials a {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            text-decoration: none !important;
            flex-shrink: 0 !important;
            width: 38px !important;
            height: 38px !important;
            border-radius: 8px !important;
            background: rgba(0,0,0,0.04) !important;
            border: 1px solid rgba(0,0,0,0.05) !important;
            transition: all 0.2s ease-in-out !important;
        }
        [data-theme="dark"] .sidebar-socials a { 
            background: rgba(255,255,255,0.05) !important; 
            border-color: rgba(255,255,255,0.1) !important; 
        }
        .sidebar-socials i {
            font-size: 1.15rem !important;
        }
        .sidebar-socials a:hover { 
            transform: translateY(-3px) !important; 
            box-shadow: 0 4px 10px rgba(0,0,0,0.08) !important;
        }

/* مقاس ثابت للشعار حسب طلب الإدارة: بدون أي تكبير تلقائي. */
:root {
    --header-height: 58px !important;
}

.main-header,
.logo-container,
.logo-container a {
    height: 58px !important;
}

.logo-container img {
    display: block !important;
    width: auto !important;
    height: 65px !important;
    min-height: 65px !important;
    max-height: 65px !important;
    max-width: 220px !important;
    object-fit: contain !important;
    object-position: center !important;
}

@media (max-width: 899.98px) {
    html:not(.pwa-standalone) body {
        padding-top: 58px !important;
    }

    html:not(.pwa-standalone) body .main-header,
    html:not(.pwa-standalone) body .header-icons,
    html:not(.pwa-standalone) body .header-left-side,
    html:not(.pwa-standalone) body .logo-container,
    html:not(.pwa-standalone) body .logo-container a {
        height: 58px !important;
        min-height: 58px !important;
    }

    html:not(.pwa-standalone) body .logo-container img {
        width: auto !important;
        height: 65px !important;
        min-height: 65px !important;
        max-height: 65px !important;
        max-width: 180px !important;
    }
}