body { font-family: 'Outfit', sans-serif; user-select: none; -webkit-tap-highlight-color: transparent; transition: background-color 0.3s ease, color 0.3s ease; }
        ::-webkit-scrollbar { width: 4px; }
        .light ::-webkit-scrollbar-track { background: #FBFBFC; }
        .dark ::-webkit-scrollbar-track { background: #0B0B0B; }
        .light ::-webkit-scrollbar-thumb { background: #A68A64; border-radius: 2px; }
        .dark ::-webkit-scrollbar-thumb { background: #C5A880; border-radius: 2px; }

        /*
         * Hierarquia visual do app:
         * base < page overlay < context detail < bottom sheet < global modal < critical confirmation.
         * Use estas classes para camadas compartilhadas em vez de z-index avulso.
         */
        .layer-base { z-index: 20; }
        .layer-page-overlay { z-index: 50; }
        .layer-context-detail { z-index: 55; }
        .layer-bottom-sheet { z-index: 60; }
        .layer-global-modal { z-index: 70; }
        .layer-modal-sheet { z-index: 75; }
        .layer-critical-confirmation { z-index: 80; }

        .light .insight-card-bg { background: rgba(255,255,255,0.92); border-color: rgba(166,138,100,0.25); }
        .dark .insight-card-bg { background: rgba(28,28,28,0.7); border-color: rgba(197,168,128,0.18); }
        /* Safe areas — status bar (top) e navigation bar (bottom) */
        :root {
            --sat: env(safe-area-inset-top, 0px);
            --sab: env(safe-area-inset-bottom, 0px);
        }
        /* Conteúdo rolável: espaço embaixo da navbar + navigation bar */
        #home-scroll, #tab-content-perfil, #tab-content-insights {
            padding-bottom: calc(8rem + var(--sab));
        }
        /* Navbar: empurra o conteúdo acima da navigation bar */
        #global-navbar {
            padding-bottom: calc(0.75rem + var(--sab));
        }
        #global-navbar::after {
            content: '';
            position: absolute;
            bottom: 0; left: 0; right: 0;
            height: var(--sab);
            background: inherit;
        }
        /* Telas de onboarding (py-12 = 3rem): adiciona status bar no topo */
        #view-login, #view-email-signup,
        #view-otp, #view-onboarding {
            padding-top: calc(3rem + var(--sat)) !important;
        }
        /* Tela de PIN (py-16 = 4rem) */
        #view-pin {
            padding-top: calc(4rem + var(--sat)) !important;
        }
        /* Dashboard e conta: só o espaço da status bar */
        #view-dashboard, #view-account {
            padding-top: var(--sat) !important;
        }
        .premium-group-box { position: relative; margin-top: 0.75rem; margin-bottom: 1rem; border-radius: 16px; transition: all 0.3s ease; overflow: hidden; }
        .light .premium-group-box { border: 1px solid rgba(166, 138, 100, 0.25); background-color: rgba(255, 255, 255, 0.9); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02); }
        .dark .premium-group-box { border: 1px solid rgba(197, 168, 128, 0.2); background-color: rgba(20, 20, 20, 0.5); }
        
        .premium-group-header { position: relative; padding: 10px 14px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; display: flex; align-items: center; transition: all 0.3s ease; border-radius: 0; }
        .light .premium-group-header { background: linear-gradient(135deg, rgba(166,138,100,0.14) 0%, rgba(166,138,100,0.04) 100%); color: #8C704C; border-bottom: 1px solid rgba(166, 138, 100, 0.15); }
        .dark .premium-group-header { background: linear-gradient(135deg, rgba(197,168,128,0.18) 0%, rgba(197,168,128,0.05) 100%); color: #e2cba9; border-bottom: 1px solid rgba(197, 168, 128, 0.15); }

        /* Cabeçalhos de categoria: tons mais escuros para diferenciar Receitas e Despesas, sem confundir com Grupos & Contas */
        .light .cat-header-entrada { background: linear-gradient(135deg, rgba(16,150,90,0.10) 0%, rgba(16,150,90,0.035) 100%); color: #15805b; border-bottom: 1px solid rgba(16,150,90,0.12); }
        .dark .cat-header-entrada { background: linear-gradient(135deg, rgba(52,211,153,0.13) 0%, rgba(52,211,153,0.045) 100%); color: #86efac; border-bottom: 1px solid rgba(52,211,153,0.13); }
        .light .cat-header-saida { background: linear-gradient(135deg, rgba(220,38,38,0.09) 0%, rgba(220,38,38,0.03) 100%); color: #c24141; border-bottom: 1px solid rgba(220,38,38,0.11); }
        .dark .cat-header-saida { background: linear-gradient(135deg, rgba(248,113,113,0.13) 0%, rgba(248,113,113,0.045) 100%); color: #fca5a5; border-bottom: 1px solid rgba(248,113,113,0.13); }
        
        .mono-font { font-family: 'Space Grotesk', sans-serif; font-variant-numeric: tabular-nums; }
        .text-gradient-metallic { background: linear-gradient(135deg, #8C704C 0%, #C5A880 45%, #8C704C 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
        
        .fade-in-up { animation: fadeInUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; opacity: 0; transform: translateY(20px); }
        @keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }
        
        .swipe-transition { transition: transform 0.25s ease-out, opacity 0.25s ease-out; }
        .swipe-left { transform: translateX(-30px); opacity: 0; }
        .swipe-right { transform: translateX(30px); opacity: 0; }
        
        input[type="date"]::-webkit-inner-spin-button, input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0; position: absolute; right: 0; width: 100%; height: 100%; cursor: pointer; }
        
        .pin-dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #A68A64; transition: all 0.2s; }
        .pin-dot.filled { background-color: #A68A64; }
        .pin-btn { width: 63px; height: 63px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 600; background-color: rgba(166, 138, 100, 0.1); color: #A68A64; transition: all 0.1s; }
        .pin-btn:active { background-color: rgba(166, 138, 100, 0.3); transform: scale(0.95); }
        
        .accordion-content { transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out; overflow: hidden; }
        .accordion-content.no-transition { transition: none !important; }
        .chevron-icon { transition: transform 0.3s ease; }
        .chevron-icon.rotated { transform: rotate(-90deg); }

        .limit-transaction-focus {
            position: relative;
            z-index: 1;
            margin-left: -1rem;
            margin-right: -1rem;
            padding-left: 1rem;
            padding-right: 1rem;
            padding-top: 0.55rem;
            padding-bottom: 0.55rem;
            animation: c4dsTransactionFocus 2.6s ease-out;
        }
        @keyframes c4dsTransactionFocus {
            0%, 55% { background: rgba(166, 138, 100, 0.14); }
            100% { background: transparent; }
        }
        .dark .limit-transaction-focus {
            animation-name: c4dsTransactionFocusDark;
        }
        @keyframes c4dsTransactionFocusDark {
            0%, 55% { background: rgba(197, 168, 128, 0.13); }
            100% { background: transparent; }
        }

        .c4ds-processing-spinner {
            width: 44px;
            height: 44px;
            border-radius: 9999px;
            border: 4px solid rgba(166, 138, 100, 0.18);
            border-top-color: #A68A64;
            animation: c4dsSpin 0.85s linear infinite;
        }
        .dark .c4ds-processing-spinner {
            border-color: rgba(197, 168, 128, 0.18);
            border-top-color: #C5A880;
        }
        @keyframes c4dsSpin {
            to { transform: rotate(360deg); }
        }

        .analysis-feature-card {
            background: rgba(166, 138, 100, 0.075);
            border-color: rgba(166, 138, 100, 0.22);
        }
        .dark .analysis-feature-card {
            background: rgba(197, 168, 128, 0.07);
            border-color: rgba(197, 168, 128, 0.18);
        }

        .transfer-icon-badge {
            background: rgba(166, 138, 100, 0.12);
            border: 1px solid rgba(166, 138, 100, 0.26);
            color: #8C704C;
        }
        .dark .transfer-icon-badge {
            background: rgba(197, 168, 128, 0.12);
            border-color: rgba(197, 168, 128, 0.28);
            color: #C5A880;
        }
        .transfer-icon-badge svg {
            width: 1.05rem;
            height: 1.05rem;
            stroke-width: 2.15;
        }

        .batch-flow-header {
            min-height: 116px;
            background: #F8F5F0;
            border-bottom: 1px solid rgba(166, 138, 100, 0.25);
            box-shadow: 0 1px 8px rgba(15, 23, 42, 0.04);
        }
        .dark .batch-flow-header {
            background: #0B0B0B;
            border-bottom-color: rgba(197, 168, 128, 0.20);
            box-shadow: none;
        }
        #batch-detail-view.batch-confirmation-layout > div:first-child {
            align-items: flex-start;
            padding-top: 1.25rem;
            padding-bottom: 0.75rem;
        }
        #batch-detail-view.batch-confirmation-layout #batch-detail-account-badge {
            margin-top: 1.65rem;
        }
        #batch-detail-view.batch-confirmation-layout #batch-detail-batch-name {
            margin-top: 0.35rem;
        }
        
        .calc-btn { transition: all 0.1s; display: flex; align-items: center; justify-content: center; }
        .calc-btn:active { transform: scale(0.95); opacity: 0.8; }
    
        /* ── Banner de nova versão (updater.js) ─────────────────────────────── */
        #update-banner {
            position: fixed;
            left: 50%;
            transform: translateX(-50%) translateY(140%);
            bottom: calc(1rem + var(--sab));
            width: calc(100% - 2rem);
            max-width: 28rem;
            z-index: 10000;
            opacity: 0;
            transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.35s ease;
            pointer-events: none;
        }
        #update-banner.update-banner-visible {
            transform: translateX(-50%) translateY(0);
            opacity: 1;
            pointer-events: auto;
        }
        #update-banner-inner {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 14px;
            border-radius: 16px;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }
        .light #update-banner-inner {
            background: rgba(255, 255, 255, 0.96);
            border: 1px solid rgba(166, 138, 100, 0.30);
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
        }
        .dark #update-banner-inner {
            background: rgba(24, 24, 24, 0.96);
            border: 1px solid rgba(197, 168, 128, 0.25);
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
        }
        .update-banner-icon {
            flex: 0 0 auto;
            width: 34px; height: 34px;
            border-radius: 10px;
            display: flex; align-items: center; justify-content: center;
            background: rgba(166, 138, 100, 0.12);
            color: #8C704C;
        }
        .dark .update-banner-icon { color: #e2cba9; background: rgba(197, 168, 128, 0.14); }
        .update-banner-icon svg { width: 18px; height: 18px; }
        .update-banner-text { display: flex; flex-direction: column; line-height: 1.15; flex: 1 1 auto; min-width: 0; }
        .update-banner-title { font-size: 13px; font-weight: 700; color: #8C704C; }
        .dark .update-banner-title { color: #e2cba9; }
        .update-banner-sub { font-size: 11px; font-weight: 500; }
        .light .update-banner-sub { color: #71717a; }
        .dark .update-banner-sub { color: #a1a1aa; }
        .update-banner-cta {
            flex: 0 0 auto;
            padding: 8px 14px;
            border-radius: 10px;
            font-size: 11px; font-weight: 700;
            text-transform: uppercase; letter-spacing: 0.06em;
            background: #A68A64; color: #fff;
            transition: all 0.1s;
        }
        .update-banner-cta:active { transform: scale(0.95); background: #8C704C; }
        .update-banner-close {
            flex: 0 0 auto;
            width: 26px; height: 26px;
            display: flex; align-items: center; justify-content: center;
            color: #a1a1aa;
        }
        .update-banner-close svg { width: 15px; height: 15px; }