:root {
    --theme-bg: #050b1a;
    --theme-text: #e2e8f0;
    --theme-card: rgba(15, 23, 42, 0.6);
    --theme-border: rgba(255, 255, 255, 0.05);
    --theme-nav: rgba(2, 6, 23, 0.8);
}

body.light-mode {
    --theme-bg: #f8fafc;
    --theme-text: #0f172a;
    --theme-card: rgba(255, 255, 255, 0.8);
    --theme-border: rgba(0, 0, 0, 0.05);
    --theme-nav: rgba(255, 255, 255, 0.9);
    background: var(--theme-bg) !important;
    color: var(--theme-text) !important;
}

body.light-mode .glass-nav {
    background: var(--theme-nav);
    border-bottom: 1px solid var(--theme-border);
}

body.light-mode .glass-card, 
body.light-mode .persona-btn {
    background: var(--theme-card);
    border-color: var(--theme-border);
    color: var(--theme-text);
}

body.light-mode h1, 
body.light-mode h2, 
body.light-mode h3, 
body.light-mode h4,
body.light-mode h5,
body.light-mode h6,
body.light-mode .text-white,
body.light-mode .text-slate-200,
body.light-mode .text-slate-100 {
    color: #0f172a !important;
}

body.light-mode .text-slate-300,
body.light-mode .text-slate-400,
body.light-mode .text-slate-500 {
    color: #334155 !important;
}

body.light-mode .text-slate-600 {
    color: #475569 !important;
}

body.light-mode .text-indigo-300,
body.light-mode .text-indigo-400 {
    color: #4f46e5 !important;
}

body.light-mode .text-teal-300,
body.light-mode .text-teal-400 {
    color: #0d9488 !important;
}

body.light-mode .text-rose-300,
body.light-mode .text-rose-400 {
    color: #e11d48 !important;
}

body.light-mode .bg-white\/5,
body.light-mode .bg-white\/10,
body.light-mode .bg-indigo-500\/10 {
    background-color: rgba(0, 0, 0, 0.05) !important;
}

body.light-mode .border-white\/5,
body.light-mode .border-white\/10,
body.light-mode .border-white\/20,
body.light-mode .border-slate-700 {
    border-color: rgba(0, 0, 0, 0.1) !important;
}

body.light-mode .glass-nav {
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
}

body.light-mode .glass-card {
    background: #ffffff !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
}

body.light-mode .filter-btn:not(.active-filter) {
    color: #64748b !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
}

body.light-mode .persona-btn:not(.active-persona) {
    background: #f1f5f9 !important;
}

body.light-mode footer {
    background: #f1f5f9 !important;
    border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
}

body.light-mode .bg-[#0a1120]\/50 {
    background-color: #f8fafc !important;
}

body.light-mode .text-white\/5 {
    color: rgba(0, 0, 0, 0.03) !important;
}

body.light-mode .mesh-gradient {
    background-color: #f1f5f9;
    background-image: 
        radial-gradient(at 0% 0%, rgba(99, 102, 241, 0.05) 0px, transparent 50%),
        radial-gradient(at 100% 0%, rgba(45, 212, 191, 0.05) 0px, transparent 50%);
}

#theme-toggle {
    position: fixed;
    bottom: 100px;
    right: 20px;
    z-index: 9999;
    width: 45px;
    height: 45px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

body:not(.light-mode) #theme-toggle {
    background: rgba(255,255,255,0.1);
    color: #fbbf24;
    border: 1px solid rgba(255,255,255,0.1);
}

body.light-mode #theme-toggle {
    background: #1e293b;
    color: #f1f5f9;
    border: 1px solid rgba(0,0,0,0.1);
}

#theme-toggle:hover {
    transform: scale(1.1);
}

/* Ensure Google Translate dropdown is visible and correctly themed */
.goog-te-combo {
    background: #1e293b !important;
    color: #f1f5f9 !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 8px !important;
    padding: 4px 8px !important;
    font-size: 12px !important;
}

body.light-mode .goog-te-combo {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
}