/* =============== نظام الثيمات المتقدم - 24 ثيماً عصرياً =============== */

/* ===== المتغيرات الأساسية ===== */
:root {
    --border-radius: 20px;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --shadow-sm: 0 4px 20px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.08);
}

/* ===== 1. الثيم الافتراضي - الليلك الناعم (Lavender Mist) ===== */
:root,
.theme-lavender-mist {
    --primary: #A78BFA;
    --primary-dark: #8B5CF6;
    --primary-light: #EDE9FE;
    --primary-soft: #C4B5FD;
    --secondary: #6B7280;
    --secondary-dark: #4B5563;
    --secondary-light: #9CA3AF;
    --bg-primary: #FAF8FF;
    --bg-secondary: #FFFFFF;
    --bg-card: #FFFFFF;
    --bg-hero: linear-gradient(135deg, #F5F3FF 0%, #EDE9FE 100%);
    --bg-footer: linear-gradient(135deg, #F3E8FF 0%, #E9D5FF 100%);
    --text-primary: #1F2937;
    --text-secondary: #6B7280;
    --text-muted: #9CA3AF;
    --text-light: #FFFFFF;
    --border: #E5E7EB;
    --border-light: #F3F4F6;
    --gradient-primary: linear-gradient(135deg, #A78BFA 0%, #8B5CF6 100%);
    --gradient-hero: linear-gradient(135deg, #F5F3FF 0%, #EDE9FE 100%);
    --shadow: 0 4px 20px rgba(139, 92, 246, 0.08);
    --shadow-hover: 0 20px 40px rgba(139, 92, 246, 0.12);
}

/* ===== 2. ثيم الوردي الناعم (Blush Pink) ===== */
.theme-blush-pink {
    --primary: #F472B6;
    --primary-dark: #EC4899;
    --primary-light: #FDF2F8;
    --primary-soft: #F9A8D4;
    --secondary: #6B7280;
    --secondary-dark: #4B5563;
    --bg-primary: #FFF5F8;
    --bg-secondary: #FFFFFF;
    --bg-hero: linear-gradient(135deg, #FDF2F8 0%, #FCE7F3 100%);
    --gradient-primary: linear-gradient(135deg, #F472B6 0%, #EC4899 100%);
    --gradient-hero: linear-gradient(135deg, #FDF2F8 0%, #FCE7F3 100%);
    --shadow: 0 4px 20px rgba(244, 114, 182, 0.06);
}

/* ===== 3. ثيم الأزرق السماوي (Sky Blue) ===== */
.theme-sky-blue {
    --primary: #60A5FA;
    --primary-dark: #3B82F6;
    --primary-light: #EFF6FF;
    --primary-soft: #93C5FD;
    --secondary: #6B7280;
    --secondary-dark: #4B5563;
    --bg-primary: #F8FAFE;
    --bg-secondary: #FFFFFF;
    --bg-hero: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
    --gradient-primary: linear-gradient(135deg, #60A5FA 0%, #3B82F6 100%);
    --gradient-hero: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
    --shadow: 0 4px 20px rgba(96, 165, 250, 0.06);
}

/* ===== 4. ثيم النعناعي (Mint Green) ===== */
.theme-mint-green {
    --primary: #34D399;
    --primary-dark: #10B981;
    --primary-light: #ECFDF5;
    --primary-soft: #6EE7B7;
    --secondary: #6B7280;
    --secondary-dark: #4B5563;
    --bg-primary: #F6FEF9;
    --bg-secondary: #FFFFFF;
    --bg-hero: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
    --gradient-primary: linear-gradient(135deg, #34D399 0%, #10B981 100%);
    --gradient-hero: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
    --shadow: 0 4px 20px rgba(16, 185, 129, 0.06);
}

/* ===== 5. ثيم الخوخي (Peach) ===== */
.theme-peach {
    --primary: #FBBF24;
    --primary-dark: #F59E0B;
    --primary-light: #FEF3C7;
    --primary-soft: #FCD34D;
    --secondary: #6B7280;
    --secondary-dark: #4B5563;
    --bg-primary: #FFFBF5;
    --bg-secondary: #FFFFFF;
    --bg-hero: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
    --gradient-primary: linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%);
    --gradient-hero: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
    --shadow: 0 4px 20px rgba(245, 158, 11, 0.06);
}

/* ===== 6. ثيم الأرجواني العميق (Deep Purple) ===== */
.theme-deep-purple {
    --primary: #8B5CF6;
    --primary-dark: #7C3AED;
    --primary-light: #F5F3FF;
    --primary-soft: #A78BFA;
    --secondary: #6B7280;
    --secondary-dark: #4B5563;
    --bg-primary: #F8F6FF;
    --bg-secondary: #FFFFFF;
    --bg-hero: linear-gradient(135deg, #F5F3FF 0%, #EDE9FE 100%);
    --gradient-primary: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%);
    --gradient-hero: linear-gradient(135deg, #F5F3FF 0%, #EDE9FE 100%);
    --shadow: 0 4px 20px rgba(139, 92, 246, 0.08);
}

/* ===== 7. ثيم المرجاني (Coral) ===== */
.theme-coral {
    --primary: #FB7185;
    --primary-dark: #F43F5E;
    --primary-light: #FFF1F2;
    --primary-soft: #FDA4AF;
    --secondary: #6B7280;
    --secondary-dark: #4B5563;
    --bg-primary: #FFF8F9;
    --bg-secondary: #FFFFFF;
    --bg-hero: linear-gradient(135deg, #FFF1F2 0%, #FFE4E6 100%);
    --gradient-primary: linear-gradient(135deg, #FB7185 0%, #F43F5E 100%);
    --gradient-hero: linear-gradient(135deg, #FFF1F2 0%, #FFE4E6 100%);
    --shadow: 0 4px 20px rgba(244, 63, 94, 0.06);
}

/* ===== 8. ثيم الزمردي (Emerald) ===== */
.theme-emerald {
    --primary: #6EE7B7;
    --primary-dark: #34D399;
    --primary-light: #ECFDF5;
    --primary-soft: #A7F3D0;
    --secondary: #6B7280;
    --secondary-dark: #4B5563;
    --bg-primary: #F6FEF9;
    --bg-secondary: #FFFFFF;
    --bg-hero: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
    --gradient-primary: linear-gradient(135deg, #6EE7B7 0%, #34D399 100%);
    --gradient-hero: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
    --shadow: 0 4px 20px rgba(16, 185, 129, 0.06);
}

/* ===== 9. ثيم اللافندر (Lavender) ===== */
.theme-lavender {
    --primary: #9F7AEA;
    --primary-dark: #805AD5;
    --primary-light: #FAF5FF;
    --primary-soft: #B794F4;
    --secondary: #6B7280;
    --secondary-dark: #4B5563;
    --bg-primary: #FDFCFE;
    --bg-secondary: #FFFFFF;
    --bg-hero: linear-gradient(135deg, #F8F6FF 0%, #F0EBFF 100%);
    --gradient-primary: linear-gradient(135deg, #9F7AEA 0%, #805AD5 100%);
    --gradient-hero: linear-gradient(135deg, #FAF5FF 0%, #F3E8FF 100%);
    --shadow: 0 4px 20px rgba(159, 122, 234, 0.06);
}

/* ===== 10. ثيم اليشم (Jade) ===== */
.theme-jade {
    --primary: #2DD4BF;
    --primary-dark: #14B8A6;
    --primary-light: #F0FDFA;
    --primary-soft: #5EEAD4;
    --secondary: #6B7280;
    --secondary-dark: #4B5563;
    --bg-primary: #F8FFFE;
    --bg-secondary: #FFFFFF;
    --bg-hero: linear-gradient(135deg, #F0FDFA 0%, #CCFBF1 100%);
    --gradient-primary: linear-gradient(135deg, #2DD4BF 0%, #14B8A6 100%);
    --gradient-hero: linear-gradient(135deg, #F0FDFA 0%, #CCFBF1 100%);
    --shadow: 0 4px 20px rgba(20, 184, 166, 0.06);
}

/* ===== 11. ثيم الكهرماني (Amber) ===== */
.theme-amber {
    --primary: #FBBF24;
    --primary-dark: #F59E0B;
    --primary-light: #FEF3C7;
    --primary-soft: #FCD34D;
    --secondary: #78716C;
    --secondary-dark: #57534E;
    --bg-primary: #FFFDF5;
    --bg-secondary: #FFFFFF;
    --bg-hero: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
    --gradient-primary: linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%);
    --gradient-hero: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
    --shadow: 0 4px 20px rgba(245, 158, 11, 0.06);
}

/* ===== 12. ثيم النيلي (Indigo) ===== */
.theme-indigo {
    --primary: #818CF8;
    --primary-dark: #6366F1;
    --primary-light: #EEF2FF;
    --primary-soft: #A5B4FC;
    --secondary: #6B7280;
    --secondary-dark: #4B5563;
    --bg-primary: #F8FAFF;
    --bg-secondary: #FFFFFF;
    --bg-hero: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 100%);
    --gradient-primary: linear-gradient(135deg, #818CF8 0%, #6366F1 100%);
    --gradient-hero: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 100%);
    --shadow: 0 4px 20px rgba(99, 102, 241, 0.06);
}

/* ===== 13. ثيم الوردي الفاتح (Light Pink) ===== */
.theme-light-pink {
    --primary: #F9A8D4;
    --primary-dark: #F472B6;
    --primary-light: #FCE7F3;
    --primary-soft: #FBCFE8;
    --secondary: #9CA3AF;
    --secondary-dark: #6B7280;
    --bg-primary: #FFF8FA;
    --bg-secondary: #FFFFFF;
    --bg-hero: linear-gradient(135deg, #FCE7F3 0%, #FBCFE8 100%);
    --gradient-primary: linear-gradient(135deg, #F9A8D4 0%, #F472B6 100%);
    --gradient-hero: linear-gradient(135deg, #FCE7F3 0%, #FBCFE8 100%);
    --shadow: 0 4px 20px rgba(244, 114, 182, 0.06);
}

/* ===== 14. ثيم الأزرق الداكن (Dark Blue) ===== */
.theme-dark-blue {
    --primary: #3B82F6;
    --primary-dark: #2563EB;
    --primary-light: #DBEAFE;
    --primary-soft: #93C5FD;
    --secondary: #64748B;
    --secondary-dark: #475569;
    --bg-primary: #F0F9FF;
    --bg-secondary: #FFFFFF;
    --bg-hero: linear-gradient(135deg, #DBEAFE 0%, #BFDBFE 100%);
    --gradient-primary: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
    --gradient-hero: linear-gradient(135deg, #DBEAFE 0%, #BFDBFE 100%);
    --shadow: 0 4px 20px rgba(59, 130, 246, 0.08);
}

/* ===== 15. ثيم الأخضر الزيتوني (Olive) ===== */
.theme-olive {
    --primary: #84CC16;
    --primary-dark: #65A30D;
    --primary-light: #F7FEE7;
    --primary-soft: #BEF264;
    --secondary: #78716C;
    --secondary-dark: #57534E;
    --bg-primary: #FDFFED;
    --bg-secondary: #FFFFFF;
    --bg-hero: linear-gradient(135deg, #F7FEE7 0%, #ECFCCB 100%);
    --gradient-primary: linear-gradient(135deg, #84CC16 0%, #65A30D 100%);
    --gradient-hero: linear-gradient(135deg, #F7FEE7 0%, #ECFCCB 100%);
    --shadow: 0 4px 20px rgba(132, 204, 22, 0.06);
}

/* ===== 16. ثيم التوتي (Berry) ===== */
.theme-berry {
    --primary: #D946EF;
    --primary-dark: #C026D3;
    --primary-light: #FAE8FF;
    --primary-soft: #F0ABFC;
    --secondary: #6B7280;
    --secondary-dark: #4B5563;
    --bg-primary: #FDF8FF;
    --bg-secondary: #FFFFFF;
    --bg-hero: linear-gradient(135deg, #FAE8FF 0%, #F3D4FE 100%);
    --gradient-primary: linear-gradient(135deg, #D946EF 0%, #C026D3 100%);
    --gradient-hero: linear-gradient(135deg, #FAE8FF 0%, #F3D4FE 100%);
    --shadow: 0 4px 20px rgba(217, 70, 239, 0.06);
}

/* ===== 17. ثيم الفيروزي (Turquoise) ===== */
.theme-turquoise {
    --primary: #14B8A6;
    --primary-dark: #0D9488;
    --primary-light: #F0FDFA;
    --primary-soft: #5EEAD4;
    --secondary: #6B7280;
    --secondary-dark: #4B5563;
    --bg-primary: #F8FFFE;
    --bg-secondary: #FFFFFF;
    --bg-hero: linear-gradient(135deg, #F0FDFA 0%, #CCFBF1 100%);
    --gradient-primary: linear-gradient(135deg, #14B8A6 0%, #0D9488 100%);
    --gradient-hero: linear-gradient(135deg, #F0FDFA 0%, #CCFBF1 100%);
    --shadow: 0 4px 20px rgba(20, 184, 166, 0.06);
}

/* ===== 18. ثيم البنفسجي الفاتح (Light Violet) ===== */
.theme-light-violet {
    --primary: #C4B5FD;
    --primary-dark: #A78BFA;
    --primary-light: #F5F3FF;
    --primary-soft: #DDD6FE;
    --secondary: #9CA3AF;
    --secondary-dark: #6B7280;
    --bg-primary: #FFFBFF;
    --bg-secondary: #FFFFFF;
    --bg-hero: linear-gradient(135deg, #F5F3FF 0%, #EDE9FE 100%);
    --gradient-primary: linear-gradient(135deg, #C4B5FD 0%, #A78BFA 100%);
    --gradient-hero: linear-gradient(135deg, #F5F3FF 0%, #EDE9FE 100%);
    --text-primary: #374151;
    --shadow: 0 4px 20px rgba(167, 139, 250, 0.06);
}

/* ===== 19. ثيم السلموني (Salmon) ===== */
.theme-salmon {
    --primary: #F97316;
    --primary-dark: #EA580C;
    --primary-light: #FFF7ED;
    --primary-soft: #FDBA74;
    --secondary: #78716C;
    --secondary-dark: #57534E;
    --bg-primary: #FFF9F5;
    --bg-secondary: #FFFFFF;
    --bg-hero: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%);
    --gradient-primary: linear-gradient(135deg, #F97316 0%, #EA580C 100%);
    --gradient-hero: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%);
    --shadow: 0 4px 20px rgba(249, 115, 22, 0.06);
}

/* ===== 20. ثيم الأزرق الجليدي (Ice Blue) ===== */
.theme-ice-blue {
    --primary: #7DD3FC;
    --primary-dark: #38BDF8;
    --primary-light: #F0F9FF;
    --primary-soft: #BAE6FD;
    --secondary: #64748B;
    --secondary-dark: #475569;
    --bg-primary: #F8FCFF;
    --bg-secondary: #FFFFFF;
    --bg-hero: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%);
    --gradient-primary: linear-gradient(135deg, #7DD3FC 0%, #38BDF8 100%);
    --gradient-hero: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%);
    --shadow: 0 4px 20px rgba(56, 189, 248, 0.06);
}

/* ===== 21. ثيم الكرزي (Cherry) ===== */
.theme-cherry {
    --primary: #EF4444;
    --primary-dark: #DC2626;
    --primary-light: #FEF2F2;
    --primary-soft: #FCA5A5;
    --secondary: #6B7280;
    --secondary-dark: #4B5563;
    --bg-primary: #FFF8F8;
    --bg-secondary: #FFFFFF;
    --bg-hero: linear-gradient(135deg, #FEF2F2 0%, #FEE2E2 100%);
    --gradient-primary: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
    --gradient-hero: linear-gradient(135deg, #FEF2F2 0%, #FEE2E2 100%);
    --shadow: 0 4px 20px rgba(239, 68, 68, 0.06);
}

/* ===== 22. ثيم الحبق (Basil) ===== */
.theme-basil {
    --primary: #22C55E;
    --primary-dark: #16A34A;
    --primary-light: #F0FDF4;
    --primary-soft: #86EFAC;
    --secondary: #6B7280;
    --secondary-dark: #4B5563;
    --bg-primary: #F8FFF9;
    --bg-secondary: #FFFFFF;
    --bg-hero: linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%);
    --gradient-primary: linear-gradient(135deg, #22C55E 0%, #16A34A 100%);
    --gradient-hero: linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%);
    --shadow: 0 4px 20px rgba(34, 197, 94, 0.06);
}

/* ===== 23. ثيم الأوركيد (Orchid) ===== */
.theme-orchid {
    --primary: #E879F9;
    --primary-dark: #D946EF;
    --primary-light: #FAF5FF;
    --primary-soft: #F0ABFC;
    --secondary: #6B7280;
    --secondary-dark: #4B5563;
    --bg-primary: #FDF8FF;
    --bg-secondary: #FFFFFF;
    --bg-hero: linear-gradient(135deg, #FAF5FF 0%, #F3E8FF 100%);
    --gradient-primary: linear-gradient(135deg, #E879F9 0%, #D946EF 100%);
    --gradient-hero: linear-gradient(135deg, #FAF5FF 0%, #F3E8FF 100%);
    --shadow: 0 4px 20px rgba(217, 70, 239, 0.06);
}

/* ===== 24. ثيم الغروب (Sunset) ===== */
.theme-sunset {
    --primary: #F43F5E;
    --primary-dark: #E11D48;
    --primary-light: #FFF1F2;
    --primary-soft: #FDA4AF;
    --secondary: #F97316;
    --secondary-dark: #EA580C;
    --bg-primary: #FFF8F9;
    --bg-secondary: #FFFFFF;
    --bg-hero: linear-gradient(135deg, #FFF1F2 0%, #FFE4E6 100%);
    --gradient-primary: linear-gradient(135deg, #F43F5E 0%, #F97316 100%);
    --gradient-hero: linear-gradient(135deg, #FFF1F2 0%, #FFE4E6 100%);
    --shadow: 0 4px 20px rgba(244, 63, 94, 0.06);
}

/* ===== التطبيقات الأساسية ===== */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

body {
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: 'Tajawal', sans-serif;
    line-height: 1.6;
}

/* Navbar */
.navbar {
    background: var(--bg-secondary);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-light);
    box-shadow: var(--shadow);
}

.nav-links a {
    color: var(--text-secondary);
    transition: var(--transition);
}

.nav-links a:hover,
.nav-links a.active-page {
    color: var(--primary);
}

.nav-links a::before {
    background: var(--gradient-primary);
}

.menu-btn {
    color: var(--text-primary);
}

/* Hero Section */
.hero {
    /*background: var(--bg-hero);*/
    position: relative;
    overflow: hidden;
}

.hero-text h1 {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero-text p {
    color: black;
}

.typing-text {
    color: black;
    border-left-color: var(--primary);
}

.contact-info a,
.contact-info span {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border-light);
    transition: var(--transition);
}

.contact-info a:hover {
    background: var(--gradient-primary);
    color: var(--text-light);
    border-color: transparent;
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
}

/* Cards */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
    border-color: var(--primary);
}

.card::before {
    background: var(--gradient-primary);
}

/* Buttons */
.btn,
.save-btn,
.add-btn,
.backup-btn,
.dashboard-toggle,
.theme-customizer-toggle {
    background: var(--gradient-primary);
    color: var(--text-light);
    border: none;
    border-radius: 50px;
    transition: var(--transition);
}

.btn:hover,
.save-btn:hover,
.add-btn:hover,
.backup-btn:hover,
.dashboard-toggle:hover,
.theme-customizer-toggle:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
    filter: brightness(1.05);
}

.btn-outline {
    background: transparent;
    border: 2px solid var(--primary);
    color: var(--primary);
}

.btn-outline:hover {
    background: var(--gradient-primary);
    color: var(--text-light);
    border-color: transparent;
}

/* Section Titles */
.section-title {
    color: var(--text-primary);
}

.section-title:after {
    background: var(--gradient-primary);
}

/* Badges */
.badge {
    background: var(--primary-light);
    color: var(--primary-dark);
    border-radius: 50px;
    padding: 6px 14px;
}

/* Lists */
.list-styled li {
    border-bottom-color: var(--border-light);
}

.list-styled li:hover {
    color: var(--primary);
    padding-right: 10px;
}

.list-styled i {
    color: var(--primary);
}

/* Footer */
footer {
    background: var(--bg-hero);
    color: var(--text-secondary);
    border-top: 1px solid var(--border-light);
}

/* Gallery */
.gallery-modern {
    background: var(--bg-hero);
}

.gallery-item {
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
}

.gallery-overlay {
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    color: white;
}

/* Social Cards */
.social-card {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-light);
    transition: var(--transition);
}

.social-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
}

/* Form Controls */
input,
textarea,
select,
.form-control {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    color: var(--text-primary);
    border-radius: 12px;
    transition: var(--transition);
}

input:focus,
textarea:focus,
select:focus,
.form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
    outline: none;
}

/* Theme Customizer */
.theme-customizer {
    background: var(--bg-secondary);
    border-radius: 0 20px 20px 0;
    box-shadow: var(--shadow-lg);
}

.theme-customizer-header {
    background: var(--gradient-primary);
    color: var(--text-light);
}

.theme-customizer-section {
    border-bottom-color: var(--border-light);
}

.theme-customizer-section h4 {
    color: var(--text-primary);
}

.color-control input {
    border-color: var(--border);
    background: var(--bg-primary);
}

.range-control input {
    accent-color: var(--primary);
}

.theme-option {
    background: var(--bg-primary);
    border: 2px solid transparent;
    transition: var(--transition);
}

.theme-option:hover {
    transform: translateY(-3px);
}

.theme-option.active {
    border-color: var(--primary);
    background: var(--primary-light);
}

.theme-option span {
    color: var(--text-secondary);
}

.btn-reset {
    background: linear-gradient(135deg, #EF4444, #DC2626);
    color: white;
}

.btn-save {
    background: var(--gradient-primary);
    color: white;
}

/* Dropdown Tabs */
.dropdown-tabs-btn {
    background: var(--gradient-primary);
    color: white;
}

.dropdown-tab-item {
    color: var(--text-primary);
    border-bottom-color: var(--border-light);
}

.dropdown-tab-item:hover {
    background: var(--primary-light);
}

.dropdown-tab-item.active {
    background: var(--primary-light);
    color: var(--primary);
}

.dropdown-tab-item i {
    color: var(--primary);
}

/* Sortable Items */
.drag-handle {
    color: var(--text-muted);
}

.sortable-item {
    background: var(--bg-secondary);
    border-color: var(--border-light);
}

/* Delete Buttons */
.delete-item,
.delete-paper-btn,
.delete-conf-btn,
.delete-pending-btn,
.delete-progress-btn,
.delete-membership,
.delete-skill-item,
.delete-course-item,
.delete-award-item {
    background: linear-gradient(135deg, #EF4444, #DC2626);
    color: white;
    transition: var(--transition);
}

.delete-item:hover,
.delete-paper-btn:hover,
.delete-conf-btn:hover,
.delete-pending-btn:hover,
.delete-progress-btn:hover,
.delete-membership:hover,
.delete-skill-item:hover,
.delete-course-item:hover,
.delete-award-item:hover {
    transform: scale(1.02);
    filter: brightness(1.05);
}

/* Filter Buttons */
.filter-btn {
    background: var(--border-light);
    color: var(--text-secondary);
}

.filter-btn.active {
    background: var(--gradient-primary);
    color: white;
}

/* Lightbox */
.lightbox {
    background: rgba(0, 0, 0, 0.95);
}

.close-lightbox {
    color: white;
}

.close-lightbox:hover {
    color: var(--primary);
}

/* Loading Spinner */
#loadingSpinner {
    background: var(--bg-primary);
}

.spinner {
    border: 3px solid var(--primary-light);
    border-top-color: var(--primary);
}

.spinner-text {
    color: var(--primary);
}

/* Responsive */
@media (max-width: 768px) {
    .nav-links {
        background: var(--bg-secondary);
        border: 1px solid var(--border-light);
        border-radius: 20px;
    }
}

/* =============== عضوية البادجات =============== */
.membership-badge {
    background: var(--primary-light);
    padding: 12px 24px;
    border-radius: 40px;
    transition: all 0.3s ease;
}

.membership-badge i {
    color: var(--primary);
    margin-left: 8px;
}

.membership-badge span {
    color: var(--text-primary);
}

.membership-badge:hover {
    transform: translateY(-3px);
    background: var(--primary);
}

.membership-badge:hover i,
.membership-badge:hover span {
    color: white;
}

/* =============== أيقونات الأبحاث =============== */
.publication-item i,
.conference-item i {
    color: var(--primary);
}

.publication-item a,
.conference-item a {
    color: var(--primary);
}

.publication-item a:hover,
.conference-item a:hover {
    color: var(--primary-dark);
}

/* =============== أبحاث طور النشر =============== */
.pending-item i {
    color: var(--warning);
}

.pending-item {
    border-bottom-color: var(--primary-light);
}

.inprogress-item i {
    color: var(--primary);
}

.inprogress-item {
    border-bottom-color: var(--primary-light);
}

/* =============== أيقونة الكأس في الجوائز =============== */
.card .fa-trophy {
    color: var(--warning);
}

/* =============== أيقونة الحقيبة في الخبرات =============== */
.card .fa-briefcase {
    color: var(--primary);
}

/* =============== روابط التواصل =============== */
.social-card {
    background: var(--primary-light);
    color: var(--primary);
}

.social-card:hover {
    background: var(--primary);
    color: white;
    transform: translateY(-3px);
}

/* =============== أيقونات PDF في المعرض =============== */
.pdf-gallery-item .fa-file-pdf {
    color: var(--primary);
}