body {
            font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
            background-color: #ffffff;
            color: #0f172a;
            position: relative;
        }
        body::after {
            content: '';
            position: fixed;
            inset: 0;
            z-index: 9999;
            pointer-events: none;
            opacity: 0.03;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
            background-repeat: repeat;
            background-size: 180px 180px;
        }

        /* 3D Realistic Purple Orb */
        .purple-orb {
            width: 72px;
            height: 72px;
            border-radius: 50%;
            background: radial-gradient(circle at 35% 30%, #f3e8ff 0%, #d8b4fe 20%, #a855f7 50%, #7e22ce 85%, #581c87 100%);
            box-shadow: 
                0 20px 35px -10px rgba(147, 51, 234, 0.45),
                0 0 40px 10px rgba(168, 85, 247, 0.2),
                inset -6px -6px 12px rgba(0, 0, 0, 0.35),
                inset 6px 6px 10px rgba(255, 255, 255, 0.7);
            position: relative;
            margin: 0 auto;
            animation: floatOrb 5s ease-in-out infinite alternate;
        }
        @keyframes floatOrb {
            0% { transform: translateY(0px) scale(1); }
            100% { transform: translateY(-6px) scale(1.02); }
        }

        /* Gradient Text */
        .text-gradient-purple {
            background: linear-gradient(135deg, #7e22ce 0%, #9333ea 50%, #a855f7 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        /* Typography & Markdown Rendering */
        .markdown-body {
            color: #1e293b;
            font-size: 0.875rem;
            line-height: 1.65;
        }
        .markdown-body p { margin-bottom: 0.75rem; }
        .markdown-body p:last-child { margin-bottom: 0; }
        .markdown-body ul { list-style-type: disc; margin-left: 1.25rem; margin-bottom: 0.75rem; }
        .markdown-body ol { list-style-type: decimal; margin-left: 1.25rem; margin-bottom: 0.75rem; }
        .markdown-body li { margin-bottom: 0.25rem; }
        
        .markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4 { 
            font-weight: 700; 
            color: #0f172a; 
            letter-spacing: -0.015em;
            margin-top: 1.25rem; 
            margin-bottom: 0.5rem; 
        }
        .markdown-body h1 { font-size: 1.15rem; border-bottom: 1px solid #f1f5f9; padding-bottom: 0.4rem; }
        .markdown-body h2 { font-size: 1.05rem; }
        .markdown-body h3 { font-size: 0.95rem; }
        .markdown-body hr { border: 0; border-top: 1px solid #f1f5f9; margin: 1rem 0; }

        .markdown-body a {
            color: #2563eb;
            text-decoration: underline;
            font-weight: 500;
        }
        .markdown-body a:hover {
            color: #1d4ed8;
        }
        .markdown-body a[href^="/downloads/"] {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            padding: 0.3rem 0.75rem;
            border-radius: 0.5rem;
            background: #f0fdf4;
            border: 1px solid #86efac;
            color: #15803d;
            text-decoration: none;
            font-weight: 600;
            font-size: 0.8125rem;
            margin: 0.2rem 0;
            transition: all 0.15s ease;
            box-shadow: 0 1px 2px rgba(0,0,0,0.03);
        }
        .markdown-body a[href^="/downloads/"]:hover {
            background: #dcfce7;
            border-color: #4ade80;
            color: #14532d;
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(0,0,0,0.06);
        }
        .markdown-body a[href$=".pdf"] {
            background: #fff1f2;
            border-color: #fecdd3;
            color: #be123c;
        }
        .markdown-body a[href$=".pdf"]:hover {
            background: #ffe4e6;
            border-color: #fda4af;
            color: #9f1239;
        }

        /* Minimalist Modern Table */
        .table-wrapper {
            overflow-x: auto;
            margin: 1rem 0;
            border: 1px solid #f1f5f9;
            border-radius: 0.75rem;
            background: #ffffff;
            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04);
        }
        .markdown-body table { 
            width: 100%; 
            border-collapse: collapse; 
            font-size: 0.8125rem; 
            text-align: left;
            margin: 0;
        }
        .markdown-body th { 
            background-color: #f8fafc; 
            color: #475569; 
            font-weight: 600; 
            font-size: 0.72rem;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            padding: 0.75rem 1rem; 
            border-bottom: 1px solid #e2e8f0; 
            white-space: nowrap;
        }
        .markdown-body td { 
            padding: 0.65rem 1rem; 
            border-bottom: 1px solid #f1f5f9; 
            color: #334155;
            vertical-align: middle;
        }
        .markdown-body tr:last-child td { border-bottom: none; }
        .markdown-body tbody tr:hover { background-color: #faf5ff; }

        .markdown-body code { 
            background-color: #f8fafc; 
            padding: 0.15rem 0.35rem; 
            border-radius: 0.35rem; 
            font-size: 0.8rem; 
            font-family: 'JetBrains Mono', monospace; 
            color: #7e22ce; 
            border: 1px solid #f1f5f9;
        }

        /* Scrollbar Halus */
        ::-webkit-scrollbar { width: 5px; height: 5px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: #cbd5e1; }

        .typing-pulse::after {
            content: '';
            display: inline-block;
            width: 6px;
            height: 14px;
            background-color: #9333ea;
            margin-left: 4px;
            vertical-align: -1px;
            animation: pulseCursor 0.8s infinite;
        }
        @keyframes pulseCursor {
            0%, 100% { opacity: 1; }
            50% { opacity: 0; }
        }
        /* === 3D MOTION & EYECATCHING ENHANCEMENTS (Desktop Only) === */
        @media (min-width: 768px) {
            /* Animated mesh gradient background for hero */
            .hero-mesh-bg { position: relative; }
            .hero-mesh-bg::before {
                content: '';
                position: absolute;
                top: -30%; left: -20%;
                width: 140%; height: 160%;
                background: 
                    radial-gradient(ellipse at 20% 50%, rgba(168, 85, 247, 0.08) 0%, transparent 50%),
                    radial-gradient(ellipse at 80% 20%, rgba(99, 102, 241, 0.06) 0%, transparent 50%),
                    radial-gradient(ellipse at 50% 80%, rgba(236, 72, 153, 0.05) 0%, transparent 50%);
                animation: meshShift 12s ease-in-out infinite alternate;
                pointer-events: none; z-index: 0;
            }
            @keyframes meshShift {
                0% { transform: translate(0, 0) scale(1); opacity: 0.7; }
                33% { transform: translate(30px, -20px) scale(1.05); opacity: 1; }
                66% { transform: translate(-20px, 15px) scale(0.98); opacity: 0.8; }
                100% { transform: translate(10px, -10px) scale(1.02); opacity: 0.9; }
            }

            /* 3D perspective tilt on hero input card */
            .card-3d-hover { perspective: 1000px; transform-style: preserve-3d; }
            .card-3d-hover > .card-3d-inner {
                transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.4s ease;
                transform-style: preserve-3d;
            }
            .card-3d-hover:hover > .card-3d-inner {
                transform: rotateX(-2deg) rotateY(3deg) translateZ(8px);
                box-shadow: 0 25px 50px -12px rgba(147, 51, 234, 0.15), 0 0 0 1px rgba(147, 51, 234, 0.1);
            }

            /* Floating particles for orb */
            .orb-container { position: relative; }
            .orb-particle { position: absolute; border-radius: 50%; pointer-events: none; }
            .orb-particle-1 { width: 6px; height: 6px; background: rgba(168, 85, 247, 0.5); top: -10px; right: -15px; animation: particleOrbit1 4s ease-in-out infinite; }
            .orb-particle-2 { width: 4px; height: 4px; background: rgba(236, 72, 153, 0.5); bottom: 5px; left: -12px; animation: particleOrbit2 5s ease-in-out infinite; }
            .orb-particle-3 { width: 5px; height: 5px; background: rgba(99, 102, 241, 0.4); top: 50%; right: -18px; animation: particleOrbit3 6s ease-in-out infinite; }
            @keyframes particleOrbit1 { 0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.6; } 50% { transform: translate(8px, -12px) scale(1.5); opacity: 1; } }
            @keyframes particleOrbit2 { 0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; } 50% { transform: translate(-10px, 8px) scale(1.3); opacity: 0.9; } }
            @keyframes particleOrbit3 { 0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.4; } 50% { transform: translate(12px, 6px) scale(1.6); opacity: 0.8; } }

            /* Glowing rings around orb */
            .orb-glow-ring { position: absolute; inset: -12px; border-radius: 50%; border: 1.5px solid rgba(168, 85, 247, 0.15); animation: glowRingPulse 3s ease-in-out infinite; pointer-events: none; }
            .orb-glow-ring-2 { position: absolute; inset: -24px; border-radius: 50%; border: 1px solid rgba(168, 85, 247, 0.08); animation: glowRingPulse 3s ease-in-out infinite 1s; pointer-events: none; }
            @keyframes glowRingPulse { 0%, 100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.08); opacity: 1; } }

            /* Stagger fade-in for example cards */
            .stagger-fade-in { animation: staggerFadeUp 0.6s cubic-bezier(0.23, 1, 0.32, 1) both; }
            .stagger-fade-in:nth-child(1) { animation-delay: 0.1s; }
            .stagger-fade-in:nth-child(2) { animation-delay: 0.2s; }
            .stagger-fade-in:nth-child(3) { animation-delay: 0.3s; }
            .stagger-fade-in:nth-child(4) { animation-delay: 0.4s; }
            @keyframes staggerFadeUp { from { opacity: 0; transform: translateY(20px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }

            /* Shimmer effect for gradient text */
            .text-gradient-purple-animated {
                background: linear-gradient(90deg, #7e22ce 0%, #d946ef 25%, #a855f7 50%, #7e22ce 75%, #9333ea 100%);
                background-size: 200% 100%;
                -webkit-background-clip: text;
                background-clip: text;
                -webkit-text-fill-color: transparent;
                animation: shimmerGradient 4s ease-in-out infinite;
            }
            @keyframes shimmerGradient { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

            /* 3D card hover lift for example cards */
            .card-hover-3d { transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1); transform-style: preserve-3d; }
            .card-hover-3d:hover { transform: translateY(-6px) rotateX(-2deg) scale(1.02); box-shadow: 0 20px 40px -15px rgba(147, 51, 234, 0.12), 0 0 0 1px rgba(147, 51, 234, 0.08); }

            /* Hero entrance animation */
            .hero-entrance { animation: heroSlideUp 0.8s cubic-bezier(0.23, 1, 0.32, 1) both; }
            @keyframes heroSlideUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }

            /* Enhanced orb 3D float */
            .purple-orb-enhanced { animation: floatOrb3D 6s ease-in-out infinite alternate !important; }
            @keyframes floatOrb3D {
                0% { transform: translateY(0) rotateX(0deg) rotateZ(0deg) scale(1); }
                25% { transform: translateY(-4px) rotateX(5deg) rotateZ(2deg) scale(1.01); }
                50% { transform: translateY(-8px) rotateX(0deg) rotateZ(-2deg) scale(1.03); }
                75% { transform: translateY(-4px) rotateX(-5deg) rotateZ(1deg) scale(1.01); }
                100% { transform: translateY(-6px) rotateX(3deg) rotateZ(0deg) scale(1.02); }
            }
        }

/* ==========================================================================
   DARK MODE THEME SYSTEM (DEEP OBSIDIAN & HIGH-CONTRAST TECH SLATE)
   ========================================================================== */

html.dark {
    color-scheme: dark;
}

html.dark body {
    background-color: #0b0f19 !important;
    color: #f1f5f9 !important;
}

html.dark body::after {
    opacity: 0.04 !important;
    filter: invert(1);
}

/* 1. Left Icon Rail (Sidebar) */
html.dark aside {
    background-color: #0d1322 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark aside .bg-slate-50 {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark aside .bg-purple-50 {
    background: rgba(147, 51, 234, 0.25) !important;
    border: 1px solid rgba(168, 85, 247, 0.45) !important;
    color: #d8b4fe !important;
    box-shadow: 0 0 12px rgba(168, 85, 247, 0.25);
}

html.dark aside button {
    color: #94a3b8 !important;
}

html.dark aside button:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

/* 2. Sliding Drawer Riwayat */
html.dark #historyDrawer {
    background-color: #0d1322 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark #historyDrawer > div:first-child,
html.dark #historyDrawer > div:last-child {
    background-color: #0f172a !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark #historyDrawer > div:nth-child(2) {
    background-color: #0d1322 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark #historyDrawer .border-b,
html.dark #historyDrawer .border-t {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark #historyDrawer span.text-slate-900,
html.dark #historyDrawer .text-slate-900 {
    color: #f8fafc !important;
}

html.dark #historyDrawer button[onclick="toggleHistoryDrawer(false)"] {
    color: #cbd5e1 !important;
}

html.dark #historyDrawer button[onclick="toggleHistoryDrawer(false)"]:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

html.dark #searchThreadInput {
    background-color: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html.dark #searchThreadInput::placeholder {
    color: #cbd5e1 !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #cbd5e1 !important;
}

html.dark #historyDrawer .relative i[data-lucide="search"] {
    color: #94a3b8 !important;
}

/* Thread Items in Conversation List (HIGH CONTRAST FIX) */
html.dark #conversationList .group {
    background-color: transparent;
    border-color: transparent !important;
    color: #f1f5f9 !important;
}

html.dark #conversationList .group:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark #conversationList .group span,
html.dark #conversationList .group span.truncate {
    color: #f1f5f9 !important;
    font-weight: 500 !important;
}

html.dark #conversationList .group:hover span {
    color: #ffffff !important;
}

html.dark #conversationList .group i[data-lucide="message-square"],
html.dark #conversationList .group i {
    color: #a855f7 !important;
    transition: color 0.15s ease;
}

html.dark #conversationList .group:hover i[data-lucide="message-square"] {
    color: #c084fc !important;
}

html.dark #conversationList .group button {
    color: #94a3b8 !important;
}

html.dark #conversationList .group button:hover {
    color: #f43f5e !important;
}

/* Active Thread in Drawer */
html.dark #conversationList .group.bg-purple-100\/80,
html.dark #conversationList .group[class*="bg-purple-100"],
html.dark #conversationList .group[class*="text-purple-950"] {
    background-color: rgba(147, 51, 234, 0.28) !important;
    border: 1px solid rgba(168, 85, 247, 0.5) !important;
    color: #ffffff !important;
}

html.dark #conversationList .group.bg-purple-100\/80 span,
html.dark #conversationList .group[class*="bg-purple-100"] span {
    color: #ffffff !important;
    font-weight: 600 !important;
}

html.dark #conversationList .group.bg-purple-100\/80 i,
html.dark #conversationList .group[class*="bg-purple-100"] i {
    color: #e9d5ff !important;
}

/* Guest / Empty State in Drawer */
html.dark #conversationList .text-slate-700 {
    color: #f1f5f9 !important;
}

html.dark #conversationList .text-slate-400 {
    color: #94a3b8 !important;
}

html.dark #conversationList .bg-slate-100 {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #cbd5e1 !important;
}

/* Drawer Footer "+ Thread Baru" Button */
html.dark #historyDrawer button[onclick*="startNewChat"] {
    background: linear-gradient(135deg, #9333ea 0%, #7e22ce 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(192, 132, 252, 0.4) !important;
    box-shadow: 0 4px 14px rgba(147, 51, 234, 0.35) !important;
}

html.dark #historyDrawer button[onclick*="startNewChat"]:hover {
    background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%) !important;
    box-shadow: 0 6px 20px rgba(168, 85, 247, 0.5) !important;
}

/* 3. Main Workspace & Header */
html.dark main {
    background-color: #0b0f19 !important;
}

html.dark header {
    background-color: #0d1322 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark header button[onclick="toggleHistoryDrawer()"] {
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #f8fafc !important;
}

html.dark header button[onclick="toggleHistoryDrawer()"]:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(168, 85, 247, 0.4) !important;
    color: #ffffff !important;
}

html.dark header button[onclick="toggleHistoryDrawer()"] i,
html.dark header button[onclick="toggleHistoryDrawer()"] span {
    color: #f8fafc !important;
}

/* Call to Action: + Thread Baru in Header */
html.dark header button[onclick="startNewChat()"] {
    background: linear-gradient(135deg, #9333ea 0%, #7e22ce 100%) !important;
    border: 1px solid rgba(192, 132, 252, 0.4) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 12px rgba(147, 51, 234, 0.4) !important;
}

html.dark header button[onclick="startNewChat()"]:hover {
    background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%) !important;
    box-shadow: 0 4px 18px rgba(168, 85, 247, 0.6) !important;
}

html.dark #headerSearchThreadBtn {
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #cbd5e1 !important;
}

html.dark #headerSearchThreadBtn:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
}

/* Model Selector Pill (Header) */
html.dark #desktopModelSelectorBtn {
    background-color: rgba(147, 51, 234, 0.22) !important;
    border: 1px solid rgba(168, 85, 247, 0.45) !important;
    color: #f3e8ff !important;
}

html.dark #desktopModelSelectorBtn:hover {
    background-color: rgba(147, 51, 234, 0.35) !important;
    border-color: rgba(192, 132, 252, 0.6) !important;
}

html.dark #desktopModelLabel {
    color: #f3e8ff !important;
    font-weight: 600 !important;
}

html.dark #desktopModelSelectorBtn i {
    color: #d8b4fe !important;
}

/* User Pill Container in Header (Admin, Operator, Guest) */
html.dark #desktopProfileTriggerBtn {
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #f8fafc !important;
}

html.dark #desktopProfileTriggerBtn:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(168, 85, 247, 0.4) !important;
}

html.dark #desktopProfileTriggerBtn span {
    color: #f8fafc !important;
}

html.dark #desktopProfileTriggerBtn span[class*="bg-purple-200"],
html.dark #desktopProfileTriggerBtn span[class*="bg-purple-100"] {
    background-color: rgba(147, 51, 234, 0.35) !important;
    color: #f3e8ff !important;
    border: 1px solid rgba(192, 132, 252, 0.4) !important;
}

html.dark #desktopProfileTriggerBtn span[class*="bg-slate-200"] {
    background-color: rgba(255, 255, 255, 0.12) !important;
    color: #cbd5e1 !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

html.dark #desktopProfileTriggerBtn span[class*="bg-amber-100"] {
    background-color: rgba(245, 158, 11, 0.25) !important;
    color: #fef3c7 !important;
    border: 1px solid rgba(245, 158, 11, 0.4) !important;
}

html.dark #desktopProfileTriggerBtn i {
    color: #cbd5e1 !important;
}

html.dark header .bg-slate-200,
html.dark #desktopModelDivider {
    background-color: rgba(255, 255, 255, 0.12) !important;
}

/* 4. Hero Section & Ambient Lighting */
html.dark .hero-mesh-bg::before {
    background: 
        radial-gradient(circle at 50% 28%, rgba(168, 85, 247, 0.22) 0%, rgba(126, 34, 206, 0.08) 40%, transparent 68%),
        radial-gradient(ellipse at 25% 50%, rgba(147, 51, 234, 0.14) 0%, transparent 55%),
        radial-gradient(ellipse at 75% 35%, rgba(99, 102, 241, 0.12) 0%, transparent 55%) !important;
    opacity: 1 !important;
}

html.dark #heroGreetingText,
html.dark #heroSubGreetingText {
    color: #f8fafc !important;
}

/* Luminous Gradient Text for "your mind?" */
html.dark .text-gradient-purple,
html.dark .text-gradient-purple-animated {
    background: linear-gradient(135deg, #d8b4fe 0%, #f0abfc 40%, #c084fc 70%, #93c5fd 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 0 14px rgba(216, 180, 254, 0.4));
}

/* Center Hero Input Card */
html.dark .card-3d-inner {
    background: linear-gradient(180deg, rgba(22, 30, 50, 0.88) 0%, rgba(14, 20, 36, 0.94) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 
        0 20px 45px -15px rgba(0, 0, 0, 0.75),
        0 0 25px 0 rgba(168, 85, 247, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(16px) !important;
}

html.dark .card-3d-inner:focus-within {
    border-color: rgba(168, 85, 247, 0.7) !important;
    box-shadow: 
        0 0 0 2px rgba(168, 85, 247, 0.25),
        0 25px 55px -15px rgba(0, 0, 0, 0.85),
        0 0 35px rgba(168, 85, 247, 0.22) !important;
}

html.dark #heroChatInput,
html.dark #chatInput {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 0.925rem !important;
    caret-color: #c084fc !important;
}

html.dark #heroChatInput::placeholder,
html.dark #chatInput::placeholder {
    color: #cbd5e1 !important;
    -webkit-text-fill-color: #cbd5e1 !important;
    opacity: 1 !important;
}

html.dark .card-3d-inner [data-lucide="sparkles"],
html.dark #chatForm [data-lucide="sparkles"] {
    color: #c084fc !important;
}

html.dark .card-3d-inner .border-t,
html.dark #chatForm .border-t {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark #heroImagePreviewBox,
html.dark #stickyImagePreviewBox {
    background-color: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    color: #f1f5f9 !important;
}

/* Button Lampirkan Berkas */
html.dark button[onclick="triggerFileUpload()"] {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    color: #ffffff !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) !important;
}

html.dark button[onclick="triggerFileUpload()"]:hover {
    background: rgba(168, 85, 247, 0.25) !important;
    border-color: rgba(192, 132, 252, 0.6) !important;
    color: #ffffff !important;
    box-shadow: 0 0 14px rgba(168, 85, 247, 0.25) !important;
}

html.dark button[onclick="triggerFileUpload()"] span {
    color: #f8fafc !important;
    font-weight: 600 !important;
}

html.dark button[onclick="triggerFileUpload()"] i {
    color: #d8b4fe !important;
}

/* Live DB Indicator */
html.dark div[onclick="checkDbStatus()"] {
    color: #f1f5f9 !important;
}

html.dark div[onclick="checkDbStatus()"] span {
    color: #f1f5f9 !important;
    font-weight: 600 !important;
}

html.dark div[onclick="checkDbStatus()"]:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark div[onclick="checkDbStatus()"]:hover span {
    color: #ffffff !important;
}

/* Voice Mic Button */
html.dark #heroMicBtn,
html.dark #stickyMicBtn {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: #cbd5e1 !important;
}

html.dark #heroMicBtn:hover,
html.dark #stickyMicBtn:hover {
    color: #ffffff !important;
    border-color: rgba(168, 85, 247, 0.5) !important;
    background: rgba(147, 51, 234, 0.25) !important;
    box-shadow: 0 0 12px rgba(168, 85, 247, 0.3) !important;
}

/* Primary Send Buttons */
html.dark button[onclick="submitHeroForm()"],
html.dark #btnSend {
    background: linear-gradient(135deg, #9333ea 0%, #7e22ce 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(147, 51, 234, 0.5), 0 0 12px rgba(168, 85, 247, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

html.dark button[onclick="submitHeroForm()"]:hover,
html.dark #btnSend:hover {
    background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%) !important;
    box-shadow: 0 6px 22px rgba(168, 85, 247, 0.65), 0 0 18px rgba(168, 85, 247, 0.45) !important;
    transform: scale(1.06);
}

/* Quick Prompt Header & Badge */
html.dark #quickPromptHeaderText {
    color: #cbd5e1 !important;
    letter-spacing: 0.06em !important;
    font-weight: 700 !important;
}

html.dark #quickPromptBadge {
    background: rgba(147, 51, 234, 0.3) !important;
    color: #f3e8ff !important;
    border: 1px solid rgba(192, 132, 252, 0.45) !important;
    font-weight: 600 !important;
}

/* 4 Quick Prompt Cards */
html.dark #quickPromptCardsContainer > button,
html.dark .card-hover-3d {
    background: linear-gradient(180deg, rgba(24, 33, 56, 0.85) 0%, rgba(15, 22, 38, 0.95) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 6px 20px -2px rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(10px) !important;
}

html.dark #quickPromptCardsContainer > button:hover,
html.dark .card-hover-3d:hover {
    background: linear-gradient(180deg, rgba(34, 46, 78, 0.92) 0%, rgba(22, 32, 54, 0.98) 100%) !important;
    border-color: rgba(192, 132, 252, 0.6) !important;
    box-shadow: 0 16px 38px -8px rgba(0, 0, 0, 0.75), 0 0 24px rgba(168, 85, 247, 0.25) !important;
}

html.dark #quickPromptCardsContainer p,
html.dark #quickPromptCardsContainer .text-slate-800,
html.dark #quickPromptCardsContainer p.text-xs,
html.dark #quickPromptCardsContainer span.font-bold,
html.dark #quickPromptCardsContainer button:hover p,
html.dark #quickPromptCardsContainer button:hover .text-slate-800,
html.dark #quickPromptCardsContainer button:hover .group-hover\:text-purple-950 {
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* Card Subtitle ("Lanjutkan chat" / "Analisis cepat") */
html.dark #quickPromptCardsContainer .text-purple-700,
html.dark #quickPromptCardsContainer span[class*="text-purple-700"],
html.dark #quickPromptCardsContainer span[class*="text-purple"] {
    color: #d8b4fe !important;
    font-weight: 600 !important;
}

html.dark #quickPromptCardsContainer span.text-slate-400 {
    color: #cbd5e1 !important;
    font-weight: 500 !important;
}

html.dark #quickPromptCardsContainer i[data-lucide="arrow-right-circle"] {
    color: #c084fc !important;
}

html.dark #quickPromptCardsContainer i,
html.dark #quickPromptCardsContainer [data-lucide] {
    color: #cbd5e1 !important;
    transition: color 0.2s ease;
}

html.dark #quickPromptCardsContainer > button:hover i,
html.dark #quickPromptCardsContainer > button:hover [data-lucide] {
    color: #d8b4fe !important;
}

html.dark #quickPromptCardsContainer .border-t {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Luminous Badges for Quick Prompt Cards */
html.dark #quickPromptCardsContainer span.border,
html.dark #quickPromptCardsContainer span[class*="border"] {
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
}

html.dark .bg-fuchsia-50,
html.dark .bg-fuchsia-100,
html.dark #quickPromptCardsContainer span[class*="bg-fuchsia"] {
    background: rgba(217, 70, 239, 0.25) !important;
    color: #fae8ff !important;
    border-color: rgba(232, 121, 249, 0.45) !important;
    box-shadow: 0 0 10px rgba(217, 70, 239, 0.2) !important;
}

html.dark .bg-pink-50,
html.dark .bg-pink-100,
html.dark #quickPromptCardsContainer span[class*="bg-pink"] {
    background: rgba(236, 72, 153, 0.25) !important;
    color: #fce7f3 !important;
    border-color: rgba(244, 114, 182, 0.45) !important;
    box-shadow: 0 0 10px rgba(236, 72, 153, 0.2) !important;
}

html.dark .bg-amber-50,
html.dark .bg-amber-100,
html.dark #quickPromptCardsContainer span[class*="bg-amber"] {
    background: rgba(245, 158, 11, 0.25) !important;
    color: #fef3c7 !important;
    border-color: rgba(251, 191, 36, 0.45) !important;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.2) !important;
}

html.dark .bg-purple-50,
html.dark .bg-purple-100,
html.dark #quickPromptCardsContainer span[class*="bg-purple"] {
    background: rgba(147, 51, 234, 0.28) !important;
    color: #f3e8ff !important;
    border-color: rgba(192, 132, 252, 0.45) !important;
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.2) !important;
}

/* Small Credit Footer */
html.dark .select-none {
    color: #94a3b8 !important;
}

html.dark .select-none span {
    color: #94a3b8 !important;
}

html.dark .select-none strong {
    color: #cbd5e1 !important;
}

html.dark .select-none span.text-slate-300 {
    color: #64748b !important;
}

/* 5. Sticky Bottom Bar */
html.dark #stickyBottomBar {
    background-color: rgba(11, 15, 25, 0.94) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark #chatForm {
    background: linear-gradient(180deg, rgba(20, 27, 48, 0.9) 0%, rgba(14, 20, 36, 0.96) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.5) !important;
}

html.dark #chatForm:focus-within {
    border-color: rgba(168, 85, 247, 0.7) !important;
    box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.25), 0 12px 30px rgba(0, 0, 0, 0.6) !important;
}

html.dark #quotedMessagePreviewBox {
    background-color: rgba(46, 16, 101, 0.65) !important;
    border: 1px solid rgba(168, 85, 247, 0.35) !important;
    border-left: 4px solid #c084fc !important;
}

html.dark #quotedMessagePreviewBox span {
    color: #f3e8ff !important;
}

html.dark #quotedMessageSnippet {
    color: #e2e8f0 !important;
}

/* 6. Chat Bubbles & Messages Stream */
html.dark .max-w-\[85\%\] {
    background-color: #1e1b4b !important;
    border: 1px solid rgba(168, 85, 247, 0.3) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}

html.dark .max-w-\[85\%\] .text-slate-400 {
    color: #cbd5e1 !important;
}

html.dark .markdown-body {
    background-color: #131b2e !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #e2e8f0 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
}

html.dark .markdown-body h1,
html.dark .markdown-body h2,
html.dark .markdown-body h3,
html.dark .markdown-body h4 {
    color: #f8fafc !important;
}

html.dark .markdown-body h1,
html.dark .markdown-body hr {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark .markdown-body a {
    color: #93c5fd !important;
}

html.dark .markdown-body a:hover {
    color: #bfdbfe !important;
}

html.dark .markdown-body a[href^="/downloads/"] {
    background-color: rgba(6, 78, 59, 0.4) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
    color: #6ee7b7 !important;
}

html.dark .markdown-body a[href^="/downloads/"]:hover {
    background-color: rgba(6, 78, 59, 0.7) !important;
    border-color: #10b981 !important;
    color: #a7f3d0 !important;
}

html.dark .markdown-body table {
    border-color: rgba(255, 255, 255, 0.12) !important;
}

html.dark .markdown-body th {
    background-color: #1e293b !important;
    color: #f8fafc !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark .markdown-body td {
    background-color: #0f172a !important;
    color: #cbd5e1 !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

html.dark .markdown-body tr:nth-child(even) td {
    background-color: #141d33 !important;
}

html.dark .markdown-body pre {
    background-color: #070a12 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #e2e8f0 !important;
}

html.dark .markdown-body code:not(pre code) {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #d8b4fe !important;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

/* Chat Action Buttons (Salin, Balas, Kirim WA, Ekspor Excel) */
html.dark #messagesContainer .text-slate-400 {
    color: #94a3b8 !important;
}

html.dark #messagesContainer button.hover\:text-slate-700:hover {
    color: #f8fafc !important;
}

html.dark #messagesContainer button.hover\:text-purple-600:hover {
    color: #c084fc !important;
}

html.dark #messagesContainer button.text-emerald-700,
html.dark #messagesContainer button.text-emerald-600 {
    color: #34d399 !important;
}

html.dark #messagesContainer button.text-emerald-700:hover,
html.dark #messagesContainer button.text-emerald-600:hover {
    color: #6ee7b7 !important;
}

/* 7. Popovers, Modals & Dropdowns */
html.dark #desktopProfilePopover,
html.dark #desktopModelModal > div > div,
html.dark #knowledgeModal > div > div,
html.dark #sqlStudioModal > div > div,
html.dark #quotaModal > div > div,
html.dark #apkDownloadModal > div > div,
html.dark #clearHistoryModal > div > div,
html.dark #exportModal > div > div {
    background-color: #111827 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #e2e8f0 !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7) !important;
}

html.dark #desktopProfilePopover > div:first-child,
html.dark #desktopProfilePopover > div:last-child {
    background-color: #0d1322 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark #desktopProfilePopover [class*="bg-slate-50"],
html.dark #desktopProfilePopover [class*="bg-slate-100"],
html.dark #desktopProfilePopover [class*="border-slate"] {
    background-color: rgba(30, 41, 59, 0.5) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark #desktopProfilePopover .text-slate-900,
html.dark #desktopProfilePopover .text-slate-800 {
    color: #f8fafc !important;
}

html.dark #desktopProfilePopover .text-slate-500,
html.dark #desktopProfilePopover .text-slate-400 {
    color: #cbd5e1 !important;
}

html.dark #desktopProfilePopover button:hover {
    background-color: rgba(255, 255, 255, 0.07) !important;
}

/* Mode Developer 4GL button in Popover (Inactive & Active) */
html.dark #headerDevModeBtn,
html.dark #desktopProfilePopover #headerDevModeBtn,
html.dark #headerDevModeBtn.bg-slate-50\/70,
html.dark #headerDevModeBtn[class*="bg-slate-50"] {
    background-color: transparent !important;
    border: 1px solid transparent !important;
    color: #f8fafc !important;
}

html.dark #headerDevModeBtn:hover,
html.dark #desktopProfilePopover #headerDevModeBtn:hover,
html.dark #headerDevModeBtn.bg-slate-50\/70:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark #headerDevModeBtn.bg-emerald-50,
html.dark #headerDevModeBtn[class*="bg-emerald-50"] {
    background-color: rgba(6, 78, 59, 0.45) !important;
    border: 1px solid rgba(16, 185, 129, 0.45) !important;
    color: #a7f3d0 !important;
}

/* Popover Icon Boxes */
html.dark #quotaBadgeBtn .w-7.h-7,
html.dark #quotaBadgeBtn div.bg-white {
    background-color: rgba(147, 51, 234, 0.22) !important;
    border-color: rgba(168, 85, 247, 0.4) !important;
    color: #d8b4fe !important;
}
html.dark #quotaBadgeBtn .w-7.h-7 i,
html.dark #quotaBadgeBtn i[data-lucide="gauge"] {
    color: #d8b4fe !important;
}

html.dark #headerKnowledgeBtn .w-7.h-7,
html.dark #headerKnowledgeBtn div[class*="bg-purple-50"] {
    background-color: rgba(147, 51, 234, 0.25) !important;
    border-color: rgba(168, 85, 247, 0.4) !important;
    color: #d8b4fe !important;
}

html.dark #headerSqlStudioBtn .w-7.h-7,
html.dark #headerSqlStudioBtn div[class*="bg-indigo-50"] {
    background-color: rgba(99, 102, 241, 0.25) !important;
    border-color: rgba(129, 140, 248, 0.4) !important;
    color: #a5b4fc !important;
}

html.dark #headerDbStatusBtn .w-7.h-7,
html.dark #headerDbStatusBtn div[class*="bg-emerald-50"] {
    background-color: rgba(16, 185, 129, 0.22) !important;
    border-color: rgba(52, 211, 153, 0.4) !important;
    color: #6ee7b7 !important;
}

html.dark #headerDevModeBtn .w-7.h-7,
html.dark #headerDevModeBtn div[class*="bg-slate-100"] {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #cbd5e1 !important;
}
html.dark #headerDevModeBtn .w-7.h-7 i,
html.dark #headerDevModeBtn i[data-lucide="code-2"] {
    color: #cbd5e1 !important;
}

html.dark #popoverThemeToggleBtn .w-7.h-7,
html.dark #popoverThemeToggleBtn div[class*="bg-amber-50"] {
    background-color: rgba(245, 158, 11, 0.22) !important;
    border-color: rgba(251, 191, 36, 0.4) !important;
    color: #fbbf24 !important;
}
html.dark #popoverThemeToggleBtn .w-7.h-7 i {
    color: #fbbf24 !important;
}

html.dark #desktopProfilePopover div[class*="bg-emerald-100"] {
    background-color: rgba(16, 185, 129, 0.22) !important;
    border-color: rgba(52, 211, 153, 0.4) !important;
    color: #6ee7b7 !important;
}

/* Download APK Button & QR Code in Popover */
html.dark #desktopProfilePopover a[href^="/download/apk"] {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}
html.dark #desktopProfilePopover a[href^="/download/apk"]:hover {
    background: linear-gradient(135deg, #334155 0%, #1e293b 100%) !important;
}

html.dark #desktopProfilePopover button[onclick*="openApkDownloadModal"] {
    color: #cbd5e1 !important;
}
html.dark #desktopProfilePopover button[onclick*="openApkDownloadModal"]:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

/* Chevrons in Popover */
html.dark #desktopProfilePopover i[data-lucide="chevron-right"] {
    color: #64748b !important;
}
html.dark #desktopProfilePopover button:hover i[data-lucide="chevron-right"] {
    color: #c084fc !important;
}

/* Guest Warning Section in Popover */
html.dark #popoverGuestSection {
    background-color: rgba(245, 158, 11, 0.15) !important;
    border-color: rgba(245, 158, 11, 0.35) !important;
}
html.dark #popoverGuestSection .text-amber-900 {
    color: #fef3c7 !important;
}
html.dark #popoverGuestSection .text-amber-700 {
    color: #fde68a !important;
}

html.dark #desktopProfilePopover #popoverUserRoleBadge {
    background-color: rgba(147, 51, 234, 0.3) !important;
    color: #f3e8ff !important;
    border-color: rgba(192, 132, 252, 0.45) !important;
}

html.dark #popoverLogoutBtn {
    background-color: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #f43f5e !important;
}

html.dark #popoverLogoutBtn:hover {
    background-color: rgba(244, 63, 94, 0.15) !important;
    border-color: rgba(244, 63, 94, 0.3) !important;
}

/* Modals General High Contrast Overrides */
html.dark .fixed.inset-0.bg-slate-950\/40,
html.dark .fixed.inset-0.bg-slate-950\/60,
html.dark .fixed.inset-0.bg-slate-950\/75,
html.dark .fixed.inset-0.bg-slate-950\/20 {
    background-color: rgba(0, 0, 0, 0.78) !important;
}

/* Modal Inner Window Backgrounds */
html.dark [id$="Modal"] > div,
html.dark [id$="ModalDesktop"] > div,
html.dark #dbStatusModal > div,
html.dark #quotaModal > div,
html.dark #desktopModelModal > div {
    background-color: #0f172a !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #e2e8f0 !important;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.8) !important;
}

/* Modal Header & Footer Bars */
html.dark [id$="Modal"] .border-b,
html.dark [id$="Modal"] .border-t,
html.dark [id$="ModalDesktop"] .border-b,
html.dark [id$="ModalDesktop"] .border-t,
html.dark #dbStatusModal .border-b,
html.dark #dbStatusModal .border-t {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark [id$="Modal"] div[class*="bg-slate-50"],
html.dark [id$="ModalDesktop"] div[class*="bg-slate-50"],
html.dark #dbStatusModal div[class*="bg-slate-50"] {
    background-color: #0b0f19 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Modal Typography */
html.dark [id$="Modal"] h1,
html.dark [id$="Modal"] h2,
html.dark [id$="Modal"] h3,
html.dark [id$="Modal"] h4,
html.dark [id$="ModalDesktop"] h3,
html.dark #dbStatusModal h3,
html.dark [id$="Modal"] .text-slate-900,
html.dark [id$="Modal"] .text-slate-800 {
    color: #f8fafc !important;
}

html.dark [id$="Modal"] .text-slate-700,
html.dark [id$="Modal"] .text-slate-600 {
    color: #cbd5e1 !important;
}

html.dark [id$="Modal"] .text-slate-500,
html.dark [id$="Modal"] .text-slate-400 {
    color: #94a3b8 !important;
}

html.dark [id$="Modal"] .text-purple-900,
html.dark [id$="Modal"] .text-purple-950,
html.dark [id$="Modal"] .text-purple-800 {
    color: #f3e8ff !important;
}

/* Modal Generic Close Buttons (X) */
html.dark [id$="Modal"] button:has([data-lucide="x"]),
html.dark #desktopModelModal button:has([data-lucide="x"]) {
    color: #94a3b8 !important;
}
html.dark [id$="Modal"] button:has([data-lucide="x"]):hover,
html.dark #desktopModelModal button:has([data-lucide="x"]):hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   DESKTOP MODEL SELECTOR MODAL (#desktopModelModal)
   ========================================================================== */

/* Inactive Model Cards (Fix White-on-White Bug) */
html.dark .desktop-model-option-card,
html.dark .desktop-model-option-card.bg-white,
html.dark #desktopModelModal .desktop-model-option-card.bg-white {
    background-color: #1e293b !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

html.dark .desktop-model-option-card:hover,
html.dark .desktop-model-option-card.bg-white:hover {
    background-color: #27354f !important;
    border-color: rgba(168, 85, 247, 0.5) !important;
}

/* Active / Selected Model Card */
html.dark .desktop-model-option-card.bg-purple-50\/40,
html.dark .desktop-model-option-card.border-purple-600,
html.dark #desktopModelModal .desktop-model-option-card.border-purple-600 {
    background: linear-gradient(135deg, rgba(88, 28, 135, 0.45) 0%, rgba(59, 7, 100, 0.5) 100%) !important;
    border: 1.5px solid #a855f7 !important;
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.25) !important;
}

/* Titles and Descriptions inside Model Cards */
html.dark .desktop-model-option-card .text-slate-900,
html.dark .desktop-model-option-card span.font-bold {
    color: #ffffff !important;
    font-weight: 700 !important;
}

html.dark .desktop-model-option-card .text-slate-500,
html.dark .desktop-model-option-card p {
    color: #cbd5e1 !important;
    line-height: 1.5 !important;
}

/* Left Icon Boxes */
html.dark .desktop-model-option-card .w-8.h-8 {
    border-color: rgba(255, 255, 255, 0.12) !important;
}

html.dark .desktop-model-option-card div[class*="bg-purple-50"] {
    background-color: rgba(147, 51, 234, 0.25) !important;
    color: #d8b4fe !important;
    border-color: rgba(168, 85, 247, 0.4) !important;
}

html.dark .desktop-model-option-card div[class*="bg-indigo-50"] {
    background-color: rgba(99, 102, 241, 0.25) !important;
    color: #a5b4fc !important;
    border-color: rgba(129, 140, 248, 0.4) !important;
}

html.dark .desktop-model-option-card div[class*="bg-emerald-50"] {
    background-color: rgba(16, 185, 129, 0.22) !important;
    color: #6ee7b7 !important;
    border-color: rgba(52, 211, 153, 0.4) !important;
}

html.dark .desktop-model-option-card div[class*="bg-blue-50"] {
    background-color: rgba(59, 130, 246, 0.25) !important;
    color: #93c5fd !important;
    border-color: rgba(96, 165, 250, 0.4) !important;
}

html.dark .desktop-model-option-card div[class*="bg-amber-50"] {
    background-color: rgba(245, 158, 11, 0.22) !important;
    color: #fbbf24 !important;
    border-color: rgba(251, 191, 36, 0.4) !important;
}

html.dark .desktop-model-option-card div[class*="bg-slate-100"] {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #cbd5e1 !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Badges inside Model Cards */
html.dark .desktop-model-option-card span[class*="bg-purple-100"] {
    background-color: rgba(147, 51, 234, 0.3) !important;
    color: #f3e8ff !important;
    border-color: rgba(192, 132, 252, 0.4) !important;
}

html.dark .desktop-model-option-card span[class*="bg-indigo-100"] {
    background-color: rgba(99, 102, 241, 0.25) !important;
    color: #e0e7ff !important;
    border-color: rgba(129, 140, 248, 0.4) !important;
}

html.dark .desktop-model-option-card span[class*="bg-emerald-100"] {
    background-color: rgba(16, 185, 129, 0.25) !important;
    color: #d1fae5 !important;
    border-color: rgba(52, 211, 153, 0.4) !important;
}

html.dark .desktop-model-option-card span[class*="bg-blue-100"] {
    background-color: rgba(59, 130, 246, 0.25) !important;
    color: #dbeafe !important;
    border-color: rgba(96, 165, 250, 0.4) !important;
}

html.dark .desktop-model-option-card span[class*="bg-amber-100"] {
    background-color: rgba(245, 158, 11, 0.25) !important;
    color: #fef3c7 !important;
    border-color: rgba(251, 191, 36, 0.4) !important;
}

html.dark .desktop-model-option-card span[class*="bg-slate-200"] {
    background-color: rgba(255, 255, 255, 0.12) !important;
    color: #f1f5f9 !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Modal Tutup Button */
html.dark #desktopModelModal button[onclick="closeDesktopModelModal()"] {
    background-color: #1e293b !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #f8fafc !important;
}
html.dark #desktopModelModal button[onclick="closeDesktopModelModal()"]:hover {
    background-color: #334155 !important;
    color: #ffffff !important;
}

/* ==========================================================================
   OTHER MODALS (QUOTA, DATABASE, KNOWLEDGE, SQL STUDIO)
   ========================================================================== */

/* Internal cards with bg-white inside any modal */
html.dark [id$="Modal"] div.bg-white,
html.dark [id$="ModalDesktop"] div.bg-white,
html.dark #dbStatusModal div.bg-white,
html.dark #quotaModal div.bg-white {
    background-color: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #f8fafc !important;
}

/* ==========================================================================
   STATUS KUOTA & POOL MULTI-AKUN MODAL (#quotaModal)
   ========================================================================== */

/* Alert / Warning Cooldown Box */
html.dark #quotaAlertBox,
html.dark #quotaModal [class*="bg-amber-50"] {
    background-color: rgba(245, 158, 11, 0.15) !important;
    border: 1px solid rgba(245, 158, 11, 0.4) !important;
    color: #fef3c7 !important;
}
html.dark #quotaAlertBox p,
html.dark #quotaAlertBox span,
html.dark #quotaModal [class*="bg-amber-50"] p,
html.dark #quotaModal [class*="bg-amber-50"] span {
    color: #fde68a !important;
}

/* Pool Multi-Akun Outer Box */
html.dark #quotaModal .bg-purple-50\/20,
html.dark #quotaModal .bg-purple-50\/30,
html.dark #quotaModal div[class*="bg-purple-50"] {
    background-color: rgba(147, 51, 234, 0.12) !important;
    border-color: rgba(168, 85, 247, 0.3) !important;
}

html.dark #poolCountBadgeDesk {
    background-color: rgba(147, 51, 234, 0.3) !important;
    color: #f3e8ff !important;
    border: 1px solid rgba(192, 132, 252, 0.4) !important;
}

/* Profile items in Pool Multi-Akun (#desktopProfileList) */
html.dark #desktopProfileList > div,
html.dark #desktopProfileList > div.bg-white {
    background-color: #1e293b !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #f8fafc !important;
}
html.dark #desktopProfileList > div:hover {
    background-color: #27354f !important;
}

/* Active Profile card in Pool (Fix Washed-out Card) */
html.dark #desktopProfileList > div.border-purple-300,
html.dark #desktopProfileList > div[class*="bg-purple-50"] {
    background: linear-gradient(135deg, rgba(88, 28, 135, 0.45) 0%, rgba(30, 41, 59, 0.85) 100%) !important;
    border: 1.5px solid rgba(168, 85, 247, 0.6) !important;
    box-shadow: 0 0 16px rgba(168, 85, 247, 0.22) !important;
}

/* Account Name / Title */
html.dark #desktopProfileList span.font-bold,
html.dark #desktopProfileList .text-slate-900 {
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* Account Email (Fix Invisible Email Address Bug!) */
html.dark #desktopProfileList .font-mono,
html.dark #desktopProfileList .text-slate-500 {
    color: #cbd5e1 !important; /* Slate 300 - clear high contrast! */
    font-weight: 500 !important;
}

/* Pill Utama on right of active profile */
html.dark #desktopProfileList span[class*="bg-purple-100"] {
    background-color: rgba(147, 51, 234, 0.3) !important;
    color: #f3e8ff !important;
    border: 1px solid rgba(192, 132, 252, 0.4) !important;
}

/* Sync All Quota Button in Multi-Account Pool */
html.dark #btnSyncProfilesQuota {
    background-color: #1e293b !important;
    border-color: rgba(168, 85, 247, 0.3) !important;
    color: #d8b4fe !important;
}
html.dark #btnSyncProfilesQuota:hover {
    background-color: #2e1065 !important;
    color: #f3e8ff !important;
}
html.dark #btnSyncProfilesQuota i {
    color: #c084fc !important;
}

/* Per-account mini gauge meter progress tracks */
html.dark #desktopProfileList div.bg-slate-200 {
    background-color: #334155 !important;
}
html.dark #desktopProfileList .border-slate-100 {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Sistem Operasional Pabrik Sync Box */
html.dark #quotaModal div[class*="bg-slate-50"] {
    background-color: #151d30 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
html.dark #btnSyncSchemaDesk {
    background-color: rgba(99, 102, 241, 0.2) !important;
    border: 1px solid rgba(129, 140, 248, 0.4) !important;
    color: #c7d2fe !important;
}
html.dark #btnSyncSchemaDesk:hover {
    background-color: rgba(99, 102, 241, 0.35) !important;
    color: #ffffff !important;
}
html.dark #btnSyncSchemaDesk i {
    color: #a5b4fc !important;
}

/* Quota Modal Footer & Buttons */
html.dark #quotaModal .border-t.bg-slate-50,
html.dark #quotaModal div:last-child[class*="bg-slate-50"] {
    background-color: #0b0f19 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
html.dark #quotaModal button[onclick="closeQuotaModal()"] {
    background-color: #1e293b !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #f8fafc !important;
}
html.dark #quotaModal button[onclick="closeQuotaModal()"]:hover {
    background-color: #334155 !important;
    color: #ffffff !important;
}
html.dark #btnProbeQuota {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #f8fafc !important;
}
html.dark #btnProbeQuota:hover {
    background: linear-gradient(135deg, #334155 0%, #1e293b 100%) !important;
}

/* Google Auth Wizard inside Quota Modal */
html.dark #quotaViewAuth div[class*="bg-slate-50"] {
    background-color: #151d30 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
html.dark #btnGetAuthUrlDesk,
html.dark #btnSubmitJsonDesk {
    background-color: #1e293b !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #f8fafc !important;
}
html.dark #btnGetAuthUrlDesk:hover,
html.dark #btnSubmitJsonDesk:hover {
    background-color: #334155 !important;
}
html.dark #authProfileNameDesk,
html.dark #authCodeInputDesk,
html.dark #tokenJsonAreaDesk {
    background-color: #0b0f19 !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #f8fafc !important;
}

/* Database Status Metric Cards */
html.dark #dbStatusModal .bg-emerald-500\/10 {
    background-color: rgba(16, 185, 129, 0.15) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
}
html.dark #dbStatusModal .text-emerald-950 {
    color: #f0fdf4 !important;
}
html.dark #dbStatusModal .text-emerald-700 {
    color: #86efac !important;
}
html.dark #dbPingBadge {
    background-color: #1e293b !important;
    border-color: rgba(16, 185, 129, 0.4) !important;
    color: #a7f3d0 !important;
}

/* Knowledge Modal Tabs & Form */
html.dark #tabRulesBtn {
    color: #c084fc !important;
}

html.dark #rulesTabContent .bg-slate-50,
html.dark #rulesTabContent .bg-purple-50\/50,
html.dark #rulesTabContent #knowledgeTipBox {
    background-color: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #e2e8f0 !important;
}

/* Inputs & Form Controls */
html.dark input,
html.dark textarea,
html.dark select {
    color-scheme: dark;
}

html.dark input:not([type="checkbox"]):not([type="radio"]),
html.dark textarea,
html.dark select {
    background-color: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #f8fafc !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
    color: #cbd5e1 !important;
    opacity: 1 !important;
}

html.dark input:focus,
html.dark textarea:focus,
html.dark select:focus {
    border-color: #a855f7 !important;
}

/* Scrollbars */
html.dark ::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}

html.dark ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 4px;
}

html.dark ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}