/* === Dark palette (from your screenshot) === */
        :root{
            --bg:#0E1117;          /* page background */
            --surface:#1A1D23;     /* cards / panels */
            --text:#F3F4F6;        /* base text */
            --muted:#9CA3AF;       /* secondary text */
            --border:#2A2F3A;      /* borders */
            --primary:#3B82F6;     /* electric blue */
            --cta:#FBBF24;         /* soft yellow CTA */
            --danger:#EF4444;      /* alerts/badges */
        }

        /* Page + base text */
        body,
        .bg-soft-background{ background-color:var(--bg) !important; color:var(--text); }
        body { color:var(--text); }

        /* Cards / surfaces (replace whites with dark surfaces) */
        .bg-white,
        .bg-white\/80,
        .rounded-xl,
        .rounded-lg { background-color:var(--surface) !important; }

        /* Borders */
        .border,
        .border-gray-200 { border-color:var(--border) !important; }
        .border-gray-300 { border-color:#374151 !important; }

        /* Text colors */
        .text-ink-black { color:var(--text) !important; }
        .text-gray-700 { color:#D1D5DB !important; }
        .text-gray-600 { color:#B3B8C2 !important; }
        .text-gray-500 { color:var(--muted) !important; }

        /* Primary (blue) + CTA (yellow) */
        .text-primary-blue { color:var(--primary) !important; }
        .bg-primary-blue { background-color:var(--primary) !important; }
        .border-primary-blue { border-color:var(--primary) !important; }
        .hover\:text-primary-blue:hover { color:var(--primary) !important; }

        .bg-accent-gold { background-color:var(--cta) !important; }
        .text-accent-gold { color:var(--cta) !important; }
        .border-accent-gold { border-color:var(--cta) !important; }
        .ring-accent-gold { --tw-ring-color: var(--cta) !important; }

        /* “Blue-50” chips → subtle blue tint for dark UI */
        .bg-blue-50 { background-color: rgba(59,130,246,.15) !important; }

        /* Hover backgrounds that referenced light grays */
        .hover\:bg-gray-100:hover,
        .hover\:bg-gray-50:hover { background-color:#111317 !important; }

        /* Sticky header that used bg-white/80 */
        .bg-white\/80 { background-color: rgba(26,29,35,.85) !important; }

        /* Buttons / chips / badges */
        .notification,
        .text-red-500 { color:var(--danger) !important; }
        .text-red-500.font-bold,
        .text-red-500 .ionicon,
        .text-red-500 i { color:var(--danger) !important; }
        .story-ring { border-color: var(--cta) !important; }

        /* Bottom mobile nav */
        nav.bg-white { background-color:var(--surface) !important; border-color:var(--border) !important; }

        /* Elevation */
        .shadow-sm { box-shadow: 0 10px 25px rgba(0,0,0,.35) !important; }
             body { background-color: #F7F7F5; font-family: 'Poppins', 'sans-serif'; }
        .story-ring { border: 2.5px solid #C89B3C; }
        .no-scrollbar::-webkit-scrollbar { display: none; }
        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
        #left-sidebar, #right-sidebar, #main-content {
            transition: all 0.3s ease-in-out;
        }