body {
            font-family: 'Manrope', sans-serif;
            transition: background-color 0.3s ease, color 0.3s ease;
        }
        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
            vertical-align: middle;
        }
        .glass-card {
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            transition: background 0.3s ease;
        }
        .dark .glass-card {
            background: rgba(43, 49, 53, 0.85);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
        }
        .ambient-shadow {
            box-shadow: 0 20px 32px rgba(74, 78, 145, 0.05);
        }
        .dark .ambient-shadow {
            box-shadow: 0 20px 32px rgba(0, 0, 0, 0.3);
        }
        .hide-scrollbar::-webkit-scrollbar {
            display: none;
        }
        .hide-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
        .section-view {
            transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .scanner-line {
            height: 3px;
            background: linear-gradient(90deg, transparent, #8df5e4, transparent);
            box-shadow: 0 0 20px #8df5e4;
            animation: scan 2s infinite ease-in-out;
        }
        @keyframes scan {
            0% { top: 0%; opacity: 0.2; }
            50% { opacity: 1; }
            100% { top: 100%; opacity: 0.2; }
        }
        .scan-frame-box {
            box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55);
        }
        #success-toast {
            transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        .modal-active {
            opacity: 1 !important;
            pointer-events: auto !important;
            transform: scale(1) !important;
        }

/* ==========================================
   MELHORIAS DO MODO ESCURO (DARK MODE CORE)
   ========================================== */
html.dark, .dark {
    color-scheme: dark;
}

.dark body {
    background-color: #0b0f19 !important; /* Deep space dark background */
    color: #f1f5f9 !important;
}

/* Header styling in Dark Mode */
.dark header#main-header {
    background-color: rgba(11, 15, 25, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

.dark #header-context-title {
    color: #8df5e4 !important;
}

/* Navigation Buttons and elements */
.dark button#quick-theme-toggle {
    color: #cbd5e1 !important;
}

.dark button#quick-theme-toggle:hover {
    background-color: rgba(255, 255, 255, 0.06) !important;
}

/* Force dark mode on surface elements and cards */
.dark .bg-white, 
.dark .bg-surface,
.dark .bg-surface-container,
.dark .bg-surface-container-low,
.dark .bg-surface-container-high,
.dark .bg-surface-container-highest {
    background-color: #151d30 !important; /* Rich premium dark slate card background */
    border-color: rgba(255, 255, 255, 0.06) !important;
    color: #f1f5f9 !important;
}

.dark .border-outline-variant\/20,
.dark .border-outline-variant\/30,
.dark .border-outline-variant\/10,
.dark .border-outline-variant\/15,
.dark .border-outline-variant\/40 {
    border-color: rgba(255, 255, 255, 0.06) !important;
}

/* Text color adaptations */
.dark .text-primary {
    color: #a5b4fc !important; /* Light indigo */
}

.dark .text-secondary {
    color: #8df5e4 !important; /* Teal accent */
}

.dark .text-on-surface {
    color: #f1f5f9 !important;
}

.dark .text-on-surface-variant {
    color: #94a3b8 !important;
}

.dark .text-outline {
    color: #64748b !important;
}

/* Inputs and interactive drawers */
.dark input[type="text"],
.dark input[type="number"],
.dark input[type="password"],
.dark select,
.dark textarea {
    background-color: #0b0f17 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

.dark input[type="text"]:focus,
.dark input[type="number"]:focus,
.dark input[type="password"]:focus,
.dark select:focus,
.dark textarea:focus {
    border-color: #8df5e4 !important;
    box-shadow: 0 0 0 2px rgba(141, 245, 228, 0.2) !important;
}

/* Modals & Dialogs */
.dark .modal-content, 
.dark .modal-box,
.dark #modal-add-transaction > div,
.dark #modal-account-manager > div,
.dark #modal-category-manager > div,
.dark #modal-add-goal > div {
    background-color: #151d30 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

.dark .bg-surface-bright {
    background-color: #0b0f19 !important;
}

.dark .bg-primary-fixed {
    background-color: rgba(165, 180, 252, 0.15) !important;
    color: #a5b4fc !important;
}

.dark .bg-secondary-container {
    background-color: rgba(141, 245, 228, 0.15) !important;
    color: #8df5e4 !important;
}

/* WhatsApp Chat Specific Fixes */
.dark .bg-emerald-50\/50 {
    background-color: rgba(6, 78, 59, 0.1) !important; /* Deep subtle green */
    border-color: rgba(16, 185, 129, 0.1) !important;
}

.dark .bg-white.self-start {
    background-color: #1f2937 !important;
    color: #f3f4f6 !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
}

.dark .bg-emerald-100\/50 {
    background-color: rgba(16, 185, 129, 0.15) !important;
    color: #a7f3d0 !important;
    border-color: rgba(16, 185, 129, 0.2) !important;
}

/* Micro-animação premium para badge de recorrência ativa */
@keyframes spin-slow {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.animate-spin-slow {
    animation: spin-slow 8s linear infinite;
    display: inline-block;
}

/* ==========================================
   TELA DE AUTENTICAÇÃO GLASSMORPHISM
   ========================================== */
#section-auth {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 10% 20%, rgba(50, 54, 120, 0.12) 0%, transparent 40%),
                radial-gradient(circle at 90% 80%, rgba(141, 245, 228, 0.08) 0%, transparent 40%);
}

.auth-card {
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 25px 50px -12px rgba(50, 54, 120, 0.12);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.dark .auth-card {
    background: rgba(21, 29, 48, 0.45) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.auth-tab {
    position: relative;
    cursor: pointer;
    transition: color 0.3s ease;
}

.auth-tab::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #323678, #8df5e4);
    transform: scaleX(0);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 99px;
}

.auth-tab.active-tab {
    color: #323678 !important;
    font-weight: 800;
}

.dark .auth-tab.active-tab {
    color: #8df5e4 !important;
}

.auth-tab.active-tab::after {
    transform: scaleX(1);
}