@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root { 
    --bg: #f3f4f6;
    --sidebar: #ffffff;
    --card: #ffffff;
    --border: #e5e7eb;
    --input: #f9fafb;
    --hover: #f3f4f6;
    --text: #1f2937;
    --muted: #6b7280;
}

.dark { 
    --bg: #0f172a;      
    --sidebar: #1e293b; 
    --card: #1e293b;
    --border: #334155;  
    --input: #0f172a;
    --hover: #334155;
    --text: #f8fafc;
    --muted: #94a3b8;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg);
    color: var(--text);
    transition: background-color 0.3s, color 0.3s;
}

/* Scrollbar Customization Global */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #475569; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #64748b; }

/* Custom Scrollbar Khusus untuk Silsilah & Area Konten Lebar */
.custom-scrollbar::-webkit-scrollbar { width: 8px; height: 8px; }
.custom-scrollbar::-webkit-scrollbar-track { background: var(--input); border-radius: 10px; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; border: 2px solid var(--input); }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: var(--muted); }

.active-nav {
    background-color: #3b82f6; 
    color: white !important;
    box-shadow: 0 4px 14px 0 rgba(59, 130, 246, 0.39);
}

input[type="checkbox"], input[type="radio"] { accent-color: #10b981; }
input[type="color"] { -webkit-appearance: none; border: none; padding: 0; }
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: none; border-radius: 4px; }

/* Utility Styles untuk Interaktivitas Pan & Zoom Silsilah */
.cursor-grab {
    cursor: -webkit-grab;
    cursor: grab;
}

.cursor-grabbing {
    cursor: -webkit-grabbing;
    cursor: grabbing;
}

.select-none {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Animasi Notifikasi Marquee (Teks Berjalan) */
@keyframes marquee {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}

.animate-marquee {
    display: inline-block;
    white-space: nowrap;
    animation: marquee 20s linear infinite;
    padding-left: 100%;
}
/* THEMES */

.theme-lime-noir {
    --bg: #f4f5f5;
    --sidebar: #ffffff;
    --card: #ffffff;
    --border: #e5e7eb;
    --input: #f9fafb;
    --hover: #f3f4f6;
    --text: #111827;
    --muted: #6b7280;
}

.theme-lime-noir .bg-blue-600 { background-color: #B9FF66 !important; color: #000000 !important; }
.theme-lime-noir .bg-blue-500 { background-color: #B9FF66 !important; color: #000000 !important; }
.theme-lime-noir .text-blue-600 { color: #B9FF66 !important; }
.theme-lime-noir .text-blue-500 { color: #9DE553 !important; }
.theme-lime-noir .text-blue-400 { color: #9DE553 !important; }
.theme-lime-noir .border-blue-500 { border-color: #B9FF66 !important; }
.theme-lime-noir .focus\:border-blue-500:focus { border-color: #B9FF66 !important; }
.theme-lime-noir .focus\:ring-blue-500:focus { --tw-ring-color: #B9FF66 !important; }
.theme-lime-noir .hover\:bg-blue-700:hover { background-color: #9DE553 !important; color: #000000 !important; }
.theme-lime-noir .hover\:bg-blue-600:hover { background-color: #9DE553 !important; color: #000000 !important; }
.theme-lime-noir .hover\:text-blue-600:hover { color: #9DE553 !important; }
.theme-lime-noir .hover\:text-blue-500:hover { color: #9DE553 !important; }
.theme-lime-noir .bg-blue-500\/10 { background-color: rgba(185, 255, 102, 0.1) !important; }
.theme-lime-noir .bg-blue-500\/20 { background-color: rgba(185, 255, 102, 0.2) !important; }
.theme-lime-noir .border-blue-500\/20 { border-color: rgba(185, 255, 102, 0.2) !important; }
.theme-lime-noir .border-blue-500\/30 { border-color: rgba(185, 255, 102, 0.3) !important; }
.theme-lime-noir .shadow-blue-600\/20 { box-shadow: 0 4px 14px 0 rgba(185, 255, 102, 0.2) !important; }
.theme-lime-noir .shadow-blue-600\/30 { box-shadow: 0 4px 14px 0 rgba(185, 255, 102, 0.3) !important; }
.theme-lime-noir .active-nav { background-color: #B9FF66 !important; color: #000000 !important; box-shadow: 0 4px 14px 0 rgba(185, 255, 102, 0.39) !important; }

.theme-ocean-blue {
    --bg: #f0f9ff;
    --sidebar: #ffffff;
    --card: #ffffff;
    --border: #e0f2fe;
    --input: #f8fafc;
    --hover: #e0f2fe;
    --text: #0f172a;
    --muted: #64748b;
}

.theme-ocean-blue .bg-blue-600 { background-color: #00A3FF !important; color: #ffffff !important; }
.theme-ocean-blue .bg-blue-500 { background-color: #00A3FF !important; color: #ffffff !important; }
.theme-ocean-blue .text-blue-600 { color: #00A3FF !important; }
.theme-ocean-blue .text-blue-500 { color: #00A3FF !important; }
.theme-ocean-blue .text-blue-400 { color: #00A3FF !important; }
.theme-ocean-blue .border-blue-500 { border-color: #00A3FF !important; }
.theme-ocean-blue .focus\:border-blue-500:focus { border-color: #00A3FF !important; }
.theme-ocean-blue .focus\:ring-blue-500:focus { --tw-ring-color: #00A3FF !important; }
.theme-ocean-blue .hover\:bg-blue-700:hover { background-color: #008ae6 !important; color: #ffffff !important; }
.theme-ocean-blue .hover\:bg-blue-600:hover { background-color: #008ae6 !important; color: #ffffff !important; }
.theme-ocean-blue .hover\:text-blue-600:hover { color: #008ae6 !important; }
.theme-ocean-blue .hover\:text-blue-500:hover { color: #008ae6 !important; }
.theme-ocean-blue .bg-blue-500\/10 { background-color: rgba(0, 163, 255, 0.1) !important; }
.theme-ocean-blue .bg-blue-500\/20 { background-color: rgba(0, 163, 255, 0.2) !important; }
.theme-ocean-blue .border-blue-500\/20 { border-color: rgba(0, 163, 255, 0.2) !important; }
.theme-ocean-blue .border-blue-500\/30 { border-color: rgba(0, 163, 255, 0.3) !important; }
.theme-ocean-blue .shadow-blue-600\/20 { box-shadow: 0 4px 14px 0 rgba(0, 163, 255, 0.2) !important; }
.theme-ocean-blue .shadow-blue-600\/30 { box-shadow: 0 4px 14px 0 rgba(0, 163, 255, 0.3) !important; }
.theme-ocean-blue .active-nav { background-color: #00A3FF !important; color: #ffffff !important; box-shadow: 0 4px 14px 0 rgba(0, 163, 255, 0.39) !important; }

.theme-cyber-purple {
    --bg: #090014;
    --sidebar: #13002b;
    --card: #13002b;
    --border: #2d0066;
    --input: #090014;
    --hover: #2d0066;
    --text: #f8fafc;
    --muted: #a78bfa;
}

.theme-cyber-purple .bg-blue-600 { background-color: #c026d3 !important; color: #ffffff !important; }
.theme-cyber-purple .bg-blue-500 { background-color: #c026d3 !important; color: #ffffff !important; }
.theme-cyber-purple .text-blue-600 { color: #c026d3 !important; }
.theme-cyber-purple .text-blue-500 { color: #e879f9 !important; }
.theme-cyber-purple .text-blue-400 { color: #e879f9 !important; }
.theme-cyber-purple .border-blue-500 { border-color: #c026d3 !important; }
.theme-cyber-purple .focus\:border-blue-500:focus { border-color: #c026d3 !important; }
.theme-cyber-purple .focus\:ring-blue-500:focus { --tw-ring-color: #c026d3 !important; }
.theme-cyber-purple .hover\:bg-blue-700:hover { background-color: #a21caf !important; color: #ffffff !important; }
.theme-cyber-purple .hover\:bg-blue-600:hover { background-color: #a21caf !important; color: #ffffff !important; }
.theme-cyber-purple .hover\:text-blue-600:hover { color: #a21caf !important; }
.theme-cyber-purple .hover\:text-blue-500:hover { color: #a21caf !important; }
.theme-cyber-purple .bg-blue-500\/10 { background-color: rgba(192, 38, 211, 0.1) !important; }
.theme-cyber-purple .bg-blue-500\/20 { background-color: rgba(192, 38, 211, 0.2) !important; }
.theme-cyber-purple .border-blue-500\/20 { border-color: rgba(192, 38, 211, 0.2) !important; }
.theme-cyber-purple .border-blue-500\/30 { border-color: rgba(192, 38, 211, 0.3) !important; }
.theme-cyber-purple .shadow-blue-600\/20 { box-shadow: 0 4px 14px 0 rgba(192, 38, 211, 0.2) !important; }
.theme-cyber-purple .shadow-blue-600\/30 { box-shadow: 0 4px 14px 0 rgba(192, 38, 211, 0.3) !important; }
.theme-cyber-purple .active-nav { background-color: #c026d3 !important; color: #ffffff !important; box-shadow: 0 4px 14px 0 rgba(192, 38, 211, 0.39) !important; }

.theme-rose-blush {
    --bg: #fff1f2;
    --sidebar: #ffffff;
    --card: #ffffff;
    --border: #ffe4e6;
    --input: #fff1f2;
    --hover: #ffe4e6;
    --text: #4c0519;
    --muted: #9f1239;
}

.theme-rose-blush .bg-blue-600 { background-color: #FF3366 !important; color: #ffffff !important; }
.theme-rose-blush .bg-blue-500 { background-color: #FF3366 !important; color: #ffffff !important; }
.theme-rose-blush .text-blue-600 { color: #FF3366 !important; }
.theme-rose-blush .text-blue-500 { color: #FF3366 !important; }
.theme-rose-blush .text-blue-400 { color: #FF3366 !important; }
.theme-rose-blush .border-blue-500 { border-color: #FF3366 !important; }
.theme-rose-blush .focus\:border-blue-500:focus { border-color: #FF3366 !important; }
.theme-rose-blush .focus\:ring-blue-500:focus { --tw-ring-color: #FF3366 !important; }
.theme-rose-blush .hover\:bg-blue-700:hover { background-color: #e62e5c !important; color: #ffffff !important; }
.theme-rose-blush .hover\:bg-blue-600:hover { background-color: #e62e5c !important; color: #ffffff !important; }
.theme-rose-blush .hover\:text-blue-600:hover { color: #e62e5c !important; }
.theme-rose-blush .hover\:text-blue-500:hover { color: #e62e5c !important; }
.theme-rose-blush .bg-blue-500\/10 { background-color: rgba(255, 51, 102, 0.1) !important; }
.theme-rose-blush .bg-blue-500\/20 { background-color: rgba(255, 51, 102, 0.2) !important; }
.theme-rose-blush .border-blue-500\/20 { border-color: rgba(255, 51, 102, 0.2) !important; }
.theme-rose-blush .border-blue-500\/30 { border-color: rgba(255, 51, 102, 0.3) !important; }
.theme-rose-blush .shadow-blue-600\/20 { box-shadow: 0 4px 14px 0 rgba(255, 51, 102, 0.2) !important; }
.theme-rose-blush .shadow-blue-600\/30 { box-shadow: 0 4px 14px 0 rgba(255, 51, 102, 0.3) !important; }
.theme-rose-blush .active-nav { background-color: #FF3366 !important; color: #ffffff !important; box-shadow: 0 4px 14px 0 rgba(255, 51, 102, 0.39) !important; }

.theme-crimson-red {
    --bg: #fef2f2;
    --sidebar: #ffffff;
    --card: #ffffff;
    --border: #fee2e2;
    --input: #fef2f2;
    --hover: #fee2e2;
    --text: #450a0a;
    --muted: #991b1b;
}

.theme-crimson-red .bg-blue-600 { background-color: #dc2626 !important; color: #ffffff !important; }
.theme-crimson-red .bg-blue-500 { background-color: #dc2626 !important; color: #ffffff !important; }
.theme-crimson-red .text-blue-600 { color: #dc2626 !important; }
.theme-crimson-red .text-blue-500 { color: #dc2626 !important; }
.theme-crimson-red .text-blue-400 { color: #dc2626 !important; }
.theme-crimson-red .border-blue-500 { border-color: #dc2626 !important; }
.theme-crimson-red .focus\:border-blue-500:focus { border-color: #dc2626 !important; }
.theme-crimson-red .focus\:ring-blue-500:focus { --tw-ring-color: #dc2626 !important; }
.theme-crimson-red .hover\:bg-blue-700:hover { background-color: #b91c1c !important; color: #ffffff !important; }
.theme-crimson-red .hover\:bg-blue-600:hover { background-color: #b91c1c !important; color: #ffffff !important; }
.theme-crimson-red .hover\:text-blue-600:hover { color: #b91c1c !important; }
.theme-crimson-red .hover\:text-blue-500:hover { color: #b91c1c !important; }
.theme-crimson-red .bg-blue-500\/10 { background-color: rgba(220, 38, 38, 0.1) !important; }
.theme-crimson-red .bg-blue-500\/20 { background-color: rgba(220, 38, 38, 0.2) !important; }
.theme-crimson-red .border-blue-500\/20 { border-color: rgba(220, 38, 38, 0.2) !important; }
.theme-crimson-red .border-blue-500\/30 { border-color: rgba(220, 38, 38, 0.3) !important; }
.theme-crimson-red .shadow-blue-600\/20 { box-shadow: 0 4px 14px 0 rgba(220, 38, 38, 0.2) !important; }
.theme-crimson-red .shadow-blue-600\/30 { box-shadow: 0 4px 14px 0 rgba(220, 38, 38, 0.3) !important; }
.theme-crimson-red .active-nav { background-color: #dc2626 !important; color: #ffffff !important; box-shadow: 0 4px 14px 0 rgba(220, 38, 38, 0.39) !important; }

.theme-golden-sun {
    --bg: #fefce8;
    --sidebar: #ffffff;
    --card: #ffffff;
    --border: #fef08a;
    --input: #fefce8;
    --hover: #fef08a;
    --text: #422006;
    --muted: #a16207;
}

.theme-golden-sun .bg-blue-600 { background-color: #eab308 !important; color: #000000 !important; }
.theme-golden-sun .bg-blue-500 { background-color: #eab308 !important; color: #000000 !important; }
.theme-golden-sun .text-blue-600 { color: #eab308 !important; }
.theme-golden-sun .text-blue-500 { color: #eab308 !important; }
.theme-golden-sun .text-blue-400 { color: #eab308 !important; }
.theme-golden-sun .border-blue-500 { border-color: #eab308 !important; }
.theme-golden-sun .focus\:border-blue-500:focus { border-color: #eab308 !important; }
.theme-golden-sun .focus\:ring-blue-500:focus { --tw-ring-color: #eab308 !important; }
.theme-golden-sun .hover\:bg-blue-700:hover { background-color: #ca8a04 !important; color: #000000 !important; }
.theme-golden-sun .hover\:bg-blue-600:hover { background-color: #ca8a04 !important; color: #000000 !important; }
.theme-golden-sun .hover\:text-blue-600:hover { color: #ca8a04 !important; }
.theme-golden-sun .hover\:text-blue-500:hover { color: #ca8a04 !important; }
.theme-golden-sun .bg-blue-500\/10 { background-color: rgba(234, 179, 8, 0.1) !important; }
.theme-golden-sun .bg-blue-500\/20 { background-color: rgba(234, 179, 8, 0.2) !important; }
.theme-golden-sun .border-blue-500\/20 { border-color: rgba(234, 179, 8, 0.2) !important; }
.theme-golden-sun .border-blue-500\/30 { border-color: rgba(234, 179, 8, 0.3) !important; }
.theme-golden-sun .shadow-blue-600\/20 { box-shadow: 0 4px 14px 0 rgba(234, 179, 8, 0.2) !important; }
.theme-golden-sun .shadow-blue-600\/30 { box-shadow: 0 4px 14px 0 rgba(234, 179, 8, 0.3) !important; }
.theme-golden-sun .active-nav { background-color: #eab308 !important; color: #000000 !important; box-shadow: 0 4px 14px 0 rgba(234, 179, 8, 0.39) !important; }

.theme-sunset-orange {
    --bg: #fff7ed;
    --sidebar: #ffffff;
    --card: #ffffff;
    --border: #ffedd5;
    --input: #fff7ed;
    --hover: #ffedd5;
    --text: #431407;
    --muted: #c2410c;
}

.theme-sunset-orange .bg-blue-600 { background-color: #f97316 !important; color: #ffffff !important; }
.theme-sunset-orange .bg-blue-500 { background-color: #f97316 !important; color: #ffffff !important; }
.theme-sunset-orange .text-blue-600 { color: #f97316 !important; }
.theme-sunset-orange .text-blue-500 { color: #f97316 !important; }
.theme-sunset-orange .text-blue-400 { color: #f97316 !important; }
.theme-sunset-orange .border-blue-500 { border-color: #f97316 !important; }
.theme-sunset-orange .focus\:border-blue-500:focus { border-color: #f97316 !important; }
.theme-sunset-orange .focus\:ring-blue-500:focus { --tw-ring-color: #f97316 !important; }
.theme-sunset-orange .hover\:bg-blue-700:hover { background-color: #ea580c !important; color: #ffffff !important; }
.theme-sunset-orange .hover\:bg-blue-600:hover { background-color: #ea580c !important; color: #ffffff !important; }
.theme-sunset-orange .hover\:text-blue-600:hover { color: #ea580c !important; }
.theme-sunset-orange .hover\:text-blue-500:hover { color: #ea580c !important; }
.theme-sunset-orange .bg-blue-500\/10 { background-color: rgba(249, 115, 22, 0.1) !important; }
.theme-sunset-orange .bg-blue-500\/20 { background-color: rgba(249, 115, 22, 0.2) !important; }
.theme-sunset-orange .border-blue-500\/20 { border-color: rgba(249, 115, 22, 0.2) !important; }
.theme-sunset-orange .border-blue-500\/30 { border-color: rgba(249, 115, 22, 0.3) !important; }
.theme-sunset-orange .shadow-blue-600\/20 { box-shadow: 0 4px 14px 0 rgba(249, 115, 22, 0.2) !important; }
.theme-sunset-orange .shadow-blue-600\/30 { box-shadow: 0 4px 14px 0 rgba(249, 115, 22, 0.3) !important; }
.theme-sunset-orange .active-nav { background-color: #f97316 !important; color: #ffffff !important; box-shadow: 0 4px 14px 0 rgba(249, 115, 22, 0.39) !important; }


/* =========================================
   TEMA: NETFLIX
   ========================================= */
.theme-netflix {
  --bg: #000000 !important;
  --card: #141414 !important;
  --input: #2b2b2b !important;
  --border: #333333 !important;
  --text: #ffffff !important;
  --muted: #b3b3b3 !important;
  --hover: #232323 !important;
  --sidebar: #000000 !important;
}

/* Override Blue to Netflix Red */
.theme-netflix .bg-blue-600, .theme-netflix .bg-blue-500 { background-color: #E50914 !important; }
.theme-netflix .hover\:bg-blue-700:hover { background-color: #B20710 !important; }
.theme-netflix .text-blue-500, .theme-netflix .text-blue-600 { color: #E50914 !important; }
.theme-netflix .border-blue-500, .theme-netflix .border-blue-600 { border-color: #E50914 !important; }
.theme-netflix .bg-blue-500\/10 { background-color: rgba(229, 9, 20, 0.1) !important; }
.theme-netflix .bg-blue-500\/5 { background-color: rgba(229, 9, 20, 0.05) !important; }
.theme-netflix .border-blue-500\/20, .theme-netflix .border-blue-500\/30 { border-color: rgba(229, 9, 20, 0.2) !important; }

/* Active Sidebar Nav (if using blue) */
.theme-netflix .active-nav {
  color: #ffffff !important;
  background-color: rgba(229, 9, 20, 0.1) !important;
  border-right: 3px solid #E50914 !important;
}

/* =========================================
   TEMA: WEB3 GLOW
   ========================================= */
.theme-web3-glow {
  --bg: #0b0f19 !important;
  --card: rgba(17, 24, 39, 0.7) !important;
  --input: #1f2937 !important;
  --border: #1f2937 !important;
  --text: #e2e8f0 !important;
  --muted: #94a3b8 !important;
  --hover: rgba(31, 41, 55, 0.8) !important;
  --sidebar: #0b0f19 !important;
}

/* Adds a subtle blurred backdrop for cards if possible, or just standard colors */
.theme-web3-glow .bg-theme-card {
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3) !important;
}

/* Override Blue to Cyan/Teal Glow */
.theme-web3-glow .bg-blue-600, .theme-web3-glow .bg-blue-500 { background-color: #0ea5e9 !important; box-shadow: 0 0 10px rgba(14, 165, 233, 0.4); }
.theme-web3-glow .hover\:bg-blue-700:hover { background-color: #0284c7 !important; box-shadow: 0 0 15px rgba(14, 165, 233, 0.6); }
.theme-web3-glow .text-blue-500, .theme-web3-glow .text-blue-600 { color: #00f0ff !important; text-shadow: 0 0 8px rgba(0, 240, 255, 0.3); }
.theme-web3-glow .border-blue-500, .theme-web3-glow .border-blue-600 { border-color: #00f0ff !important; box-shadow: 0 0 5px rgba(0, 240, 255, 0.2); }
.theme-web3-glow .bg-blue-500\/10 { background-color: rgba(14, 165, 233, 0.1) !important; }
.theme-web3-glow .bg-blue-500\/5 { background-color: rgba(14, 165, 233, 0.05) !important; }
.theme-web3-glow .border-blue-500\/20, .theme-web3-glow .border-blue-500\/30 { border-color: rgba(0, 240, 255, 0.2) !important; }

/* Active Sidebar Nav */
.theme-web3-glow .active-nav {
  color: #00f0ff !important;
  background-color: rgba(14, 165, 233, 0.15) !important;
  border-right: 3px solid #00f0ff !important;
  box-shadow: inset -3px 0 10px rgba(0, 240, 255, 0.1);
}

/* Glow effect for headings */
.theme-web3-glow h2 {
  text-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
}


/* --- DASHBOARD WIDGET COLOR OVERRIDES --- */

.theme-lime-noir .bg-orange-500, .theme-lime-noir .bg-green-600, .theme-lime-noir .bg-green-500, .theme-lime-noir .bg-red-500, .theme-lime-noir .bg-red-600, .theme-lime-noir .bg-teal-500, .theme-lime-noir .bg-teal-600, .theme-lime-noir .bg-purple-500, .theme-lime-noir .bg-purple-600 { background-color: #B9FF66 !important; color: #ffffff !important;  }
.theme-lime-noir .text-orange-500, .theme-lime-noir .text-red-500, .theme-lime-noir .text-green-500, .theme-lime-noir .text-teal-500, .theme-lime-noir .text-purple-500 { color: #B9FF66 !important; }
.theme-lime-noir .border-orange-500\/30, .theme-lime-noir .border-green-500\/30, .theme-lime-noir .border-red-500\/30 { border-color: color-mix(in srgb, #B9FF66 30%, transparent) !important; }
.theme-lime-noir .bg-orange-500\/10, .theme-lime-noir .bg-green-500\/10, .theme-lime-noir .bg-red-500\/10 { background-color: color-mix(in srgb, #B9FF66 10%, transparent) !important; color: #B9FF66 !important; }
.theme-lime-noir .bg-orange-500\/5, .theme-lime-noir .bg-green-500\/5, .theme-lime-noir .bg-red-500\/5 { background-color: color-mix(in srgb, #B9FF66 5%, transparent) !important; }
.theme-lime-noir .shadow-orange-500\/30, .theme-lime-noir .shadow-green-500\/30 { box-shadow: 0 4px 14px 0 color-mix(in srgb, #B9FF66 30%, transparent) !important; }

.theme-ocean-blue .bg-orange-500, .theme-ocean-blue .bg-green-600, .theme-ocean-blue .bg-green-500, .theme-ocean-blue .bg-red-500, .theme-ocean-blue .bg-red-600, .theme-ocean-blue .bg-teal-500, .theme-ocean-blue .bg-teal-600, .theme-ocean-blue .bg-purple-500, .theme-ocean-blue .bg-purple-600 { background-color: #00A3FF !important; color: #ffffff !important;  }
.theme-ocean-blue .text-orange-500, .theme-ocean-blue .text-red-500, .theme-ocean-blue .text-green-500, .theme-ocean-blue .text-teal-500, .theme-ocean-blue .text-purple-500 { color: #00A3FF !important; }
.theme-ocean-blue .border-orange-500\/30, .theme-ocean-blue .border-green-500\/30, .theme-ocean-blue .border-red-500\/30 { border-color: color-mix(in srgb, #00A3FF 30%, transparent) !important; }
.theme-ocean-blue .bg-orange-500\/10, .theme-ocean-blue .bg-green-500\/10, .theme-ocean-blue .bg-red-500\/10 { background-color: color-mix(in srgb, #00A3FF 10%, transparent) !important; color: #00A3FF !important; }
.theme-ocean-blue .bg-orange-500\/5, .theme-ocean-blue .bg-green-500\/5, .theme-ocean-blue .bg-red-500\/5 { background-color: color-mix(in srgb, #00A3FF 5%, transparent) !important; }
.theme-ocean-blue .shadow-orange-500\/30, .theme-ocean-blue .shadow-green-500\/30 { box-shadow: 0 4px 14px 0 color-mix(in srgb, #00A3FF 30%, transparent) !important; }

.theme-cyber-purple .bg-orange-500, .theme-cyber-purple .bg-green-600, .theme-cyber-purple .bg-green-500, .theme-cyber-purple .bg-red-500, .theme-cyber-purple .bg-red-600, .theme-cyber-purple .bg-teal-500, .theme-cyber-purple .bg-teal-600, .theme-cyber-purple .bg-purple-500, .theme-cyber-purple .bg-purple-600 { background-color: #c026d3 !important; color: #ffffff !important;  }
.theme-cyber-purple .text-orange-500, .theme-cyber-purple .text-red-500, .theme-cyber-purple .text-green-500, .theme-cyber-purple .text-teal-500, .theme-cyber-purple .text-purple-500 { color: #c026d3 !important; }
.theme-cyber-purple .border-orange-500\/30, .theme-cyber-purple .border-green-500\/30, .theme-cyber-purple .border-red-500\/30 { border-color: color-mix(in srgb, #c026d3 30%, transparent) !important; }
.theme-cyber-purple .bg-orange-500\/10, .theme-cyber-purple .bg-green-500\/10, .theme-cyber-purple .bg-red-500\/10 { background-color: color-mix(in srgb, #c026d3 10%, transparent) !important; color: #c026d3 !important; }
.theme-cyber-purple .bg-orange-500\/5, .theme-cyber-purple .bg-green-500\/5, .theme-cyber-purple .bg-red-500\/5 { background-color: color-mix(in srgb, #c026d3 5%, transparent) !important; }
.theme-cyber-purple .shadow-orange-500\/30, .theme-cyber-purple .shadow-green-500\/30 { box-shadow: 0 4px 14px 0 color-mix(in srgb, #c026d3 30%, transparent) !important; }

.theme-rose-blush .bg-orange-500, .theme-rose-blush .bg-green-600, .theme-rose-blush .bg-green-500, .theme-rose-blush .bg-red-500, .theme-rose-blush .bg-red-600, .theme-rose-blush .bg-teal-500, .theme-rose-blush .bg-teal-600, .theme-rose-blush .bg-purple-500, .theme-rose-blush .bg-purple-600 { background-color: #FF3366 !important; color: #ffffff !important;  }
.theme-rose-blush .text-orange-500, .theme-rose-blush .text-red-500, .theme-rose-blush .text-green-500, .theme-rose-blush .text-teal-500, .theme-rose-blush .text-purple-500 { color: #FF3366 !important; }
.theme-rose-blush .border-orange-500\/30, .theme-rose-blush .border-green-500\/30, .theme-rose-blush .border-red-500\/30 { border-color: color-mix(in srgb, #FF3366 30%, transparent) !important; }
.theme-rose-blush .bg-orange-500\/10, .theme-rose-blush .bg-green-500\/10, .theme-rose-blush .bg-red-500\/10 { background-color: color-mix(in srgb, #FF3366 10%, transparent) !important; color: #FF3366 !important; }
.theme-rose-blush .bg-orange-500\/5, .theme-rose-blush .bg-green-500\/5, .theme-rose-blush .bg-red-500\/5 { background-color: color-mix(in srgb, #FF3366 5%, transparent) !important; }
.theme-rose-blush .shadow-orange-500\/30, .theme-rose-blush .shadow-green-500\/30 { box-shadow: 0 4px 14px 0 color-mix(in srgb, #FF3366 30%, transparent) !important; }

.theme-crimson-red .bg-orange-500, .theme-crimson-red .bg-green-600, .theme-crimson-red .bg-green-500, .theme-crimson-red .bg-red-500, .theme-crimson-red .bg-red-600, .theme-crimson-red .bg-teal-500, .theme-crimson-red .bg-teal-600, .theme-crimson-red .bg-purple-500, .theme-crimson-red .bg-purple-600 { background-color: #dc2626 !important; color: #ffffff !important;  }
.theme-crimson-red .text-orange-500, .theme-crimson-red .text-red-500, .theme-crimson-red .text-green-500, .theme-crimson-red .text-teal-500, .theme-crimson-red .text-purple-500 { color: #dc2626 !important; }
.theme-crimson-red .border-orange-500\/30, .theme-crimson-red .border-green-500\/30, .theme-crimson-red .border-red-500\/30 { border-color: color-mix(in srgb, #dc2626 30%, transparent) !important; }
.theme-crimson-red .bg-orange-500\/10, .theme-crimson-red .bg-green-500\/10, .theme-crimson-red .bg-red-500\/10 { background-color: color-mix(in srgb, #dc2626 10%, transparent) !important; color: #dc2626 !important; }
.theme-crimson-red .bg-orange-500\/5, .theme-crimson-red .bg-green-500\/5, .theme-crimson-red .bg-red-500\/5 { background-color: color-mix(in srgb, #dc2626 5%, transparent) !important; }
.theme-crimson-red .shadow-orange-500\/30, .theme-crimson-red .shadow-green-500\/30 { box-shadow: 0 4px 14px 0 color-mix(in srgb, #dc2626 30%, transparent) !important; }

.theme-golden-sun .bg-orange-500, .theme-golden-sun .bg-green-600, .theme-golden-sun .bg-green-500, .theme-golden-sun .bg-red-500, .theme-golden-sun .bg-red-600, .theme-golden-sun .bg-teal-500, .theme-golden-sun .bg-teal-600, .theme-golden-sun .bg-purple-500, .theme-golden-sun .bg-purple-600 { background-color: #eab308 !important; color: #ffffff !important;  }
.theme-golden-sun .text-orange-500, .theme-golden-sun .text-red-500, .theme-golden-sun .text-green-500, .theme-golden-sun .text-teal-500, .theme-golden-sun .text-purple-500 { color: #eab308 !important; }
.theme-golden-sun .border-orange-500\/30, .theme-golden-sun .border-green-500\/30, .theme-golden-sun .border-red-500\/30 { border-color: color-mix(in srgb, #eab308 30%, transparent) !important; }
.theme-golden-sun .bg-orange-500\/10, .theme-golden-sun .bg-green-500\/10, .theme-golden-sun .bg-red-500\/10 { background-color: color-mix(in srgb, #eab308 10%, transparent) !important; color: #eab308 !important; }
.theme-golden-sun .bg-orange-500\/5, .theme-golden-sun .bg-green-500\/5, .theme-golden-sun .bg-red-500\/5 { background-color: color-mix(in srgb, #eab308 5%, transparent) !important; }
.theme-golden-sun .shadow-orange-500\/30, .theme-golden-sun .shadow-green-500\/30 { box-shadow: 0 4px 14px 0 color-mix(in srgb, #eab308 30%, transparent) !important; }

.theme-sunset-orange .bg-orange-500, .theme-sunset-orange .bg-green-600, .theme-sunset-orange .bg-green-500, .theme-sunset-orange .bg-red-500, .theme-sunset-orange .bg-red-600, .theme-sunset-orange .bg-teal-500, .theme-sunset-orange .bg-teal-600, .theme-sunset-orange .bg-purple-500, .theme-sunset-orange .bg-purple-600 { background-color: #f97316 !important; color: #ffffff !important;  }
.theme-sunset-orange .text-orange-500, .theme-sunset-orange .text-red-500, .theme-sunset-orange .text-green-500, .theme-sunset-orange .text-teal-500, .theme-sunset-orange .text-purple-500 { color: #f97316 !important; }
.theme-sunset-orange .border-orange-500\/30, .theme-sunset-orange .border-green-500\/30, .theme-sunset-orange .border-red-500\/30 { border-color: color-mix(in srgb, #f97316 30%, transparent) !important; }
.theme-sunset-orange .bg-orange-500\/10, .theme-sunset-orange .bg-green-500\/10, .theme-sunset-orange .bg-red-500\/10 { background-color: color-mix(in srgb, #f97316 10%, transparent) !important; color: #f97316 !important; }
.theme-sunset-orange .bg-orange-500\/5, .theme-sunset-orange .bg-green-500\/5, .theme-sunset-orange .bg-red-500\/5 { background-color: color-mix(in srgb, #f97316 5%, transparent) !important; }
.theme-sunset-orange .shadow-orange-500\/30, .theme-sunset-orange .shadow-green-500\/30 { box-shadow: 0 4px 14px 0 color-mix(in srgb, #f97316 30%, transparent) !important; }

.theme-netflix .bg-orange-500, .theme-netflix .bg-green-600, .theme-netflix .bg-green-500, .theme-netflix .bg-red-500, .theme-netflix .bg-red-600, .theme-netflix .bg-teal-500, .theme-netflix .bg-teal-600, .theme-netflix .bg-purple-500, .theme-netflix .bg-purple-600 { background-color: #E50914 !important; color: #ffffff !important;  }
.theme-netflix .text-orange-500, .theme-netflix .text-red-500, .theme-netflix .text-green-500, .theme-netflix .text-teal-500, .theme-netflix .text-purple-500 { color: #E50914 !important; }
.theme-netflix .border-orange-500\/30, .theme-netflix .border-green-500\/30, .theme-netflix .border-red-500\/30 { border-color: color-mix(in srgb, #E50914 30%, transparent) !important; }
.theme-netflix .bg-orange-500\/10, .theme-netflix .bg-green-500\/10, .theme-netflix .bg-red-500\/10 { background-color: color-mix(in srgb, #E50914 10%, transparent) !important; color: #E50914 !important; }
.theme-netflix .bg-orange-500\/5, .theme-netflix .bg-green-500\/5, .theme-netflix .bg-red-500\/5 { background-color: color-mix(in srgb, #E50914 5%, transparent) !important; }
.theme-netflix .shadow-orange-500\/30, .theme-netflix .shadow-green-500\/30 { box-shadow: 0 4px 14px 0 color-mix(in srgb, #E50914 30%, transparent) !important; }

.theme-web3-glow .bg-orange-500, .theme-web3-glow .bg-green-600, .theme-web3-glow .bg-green-500, .theme-web3-glow .bg-red-500, .theme-web3-glow .bg-red-600, .theme-web3-glow .bg-teal-500, .theme-web3-glow .bg-teal-600, .theme-web3-glow .bg-purple-500, .theme-web3-glow .bg-purple-600 { background-color: #0ea5e9 !important; color: #ffffff !important; box-shadow: 0 0 10px rgba(14, 165, 233, 0.4); }
.theme-web3-glow .text-orange-500, .theme-web3-glow .text-red-500, .theme-web3-glow .text-green-500, .theme-web3-glow .text-teal-500, .theme-web3-glow .text-purple-500 { color: #00f0ff !important; }
.theme-web3-glow .border-orange-500\/30, .theme-web3-glow .border-green-500\/30, .theme-web3-glow .border-red-500\/30 { border-color: color-mix(in srgb, #00f0ff 30%, transparent) !important; }
.theme-web3-glow .bg-orange-500\/10, .theme-web3-glow .bg-green-500\/10, .theme-web3-glow .bg-red-500\/10 { background-color: color-mix(in srgb, #0ea5e9 10%, transparent) !important; color: #00f0ff !important; }
.theme-web3-glow .bg-orange-500\/5, .theme-web3-glow .bg-green-500\/5, .theme-web3-glow .bg-red-500\/5 { background-color: color-mix(in srgb, #0ea5e9 5%, transparent) !important; }
.theme-web3-glow .shadow-orange-500\/30, .theme-web3-glow .shadow-green-500\/30 { box-shadow: 0 4px 14px 0 color-mix(in srgb, #0ea5e9 30%, transparent) !important; }