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; }

        /* DEV-20/373 — no extrato, não exponha o thumb nativo arrastável na mesma
           borda reservada ao gesto da gaveta. A rolagem por toque continua normal. */
        #transactions-container { scrollbar-width: none; -ms-overflow-style: none; }
        #transactions-container::-webkit-scrollbar { display: none; width: 0; height: 0; }

        /*
         * 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; }

        /* 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 {
            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); }
        }

        .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; }


/* DEV17_CALCULATOR_PRESS_FEEDBACK_3040
   Feedback inspirado na sensação de toque da calculadora Android,
   mas usando a linguagem visual bronze/dourada do Cash4DS. */
.calc-btn {
    position: relative;
    isolation: isolate;
    -webkit-tap-highlight-color: transparent;
    transition: transform .12s ease, box-shadow .24s ease, border-color .24s ease, background-color .24s ease;
}
.calc-btn::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: inherit;
    border: 1px solid rgba(166, 138, 100, 0);
    opacity: 0;
    transform: scale(.78);
    pointer-events: none;
}
.calc-btn.calc-pressed {
    transform: scale(.965);
    border-color: rgba(166, 138, 100, .45);
    box-shadow: 0 0 0 2px rgba(166, 138, 100, .14), 0 0 18px rgba(166, 138, 100, .28);
}
.calc-btn.calc-pressed::after {
    animation: cash4ds-calc-tap .26s ease-out;
}
.dark .calc-btn.calc-pressed {
    border-color: rgba(197, 168, 128, .55);
    box-shadow: 0 0 0 2px rgba(197, 168, 128, .16), 0 0 20px rgba(197, 168, 128, .30);
}
.dark .calc-btn.calc-pressed::after {
    border-color: rgba(197, 168, 128, .55);
}
@keyframes cash4ds-calc-tap {
    0% { opacity: .68; transform: scale(.78); border-color: rgba(166, 138, 100, .62); }
    100% { opacity: 0; transform: scale(1.18); border-color: rgba(166, 138, 100, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .calc-btn { transition: none; }
    .calc-btn.calc-pressed { transform: none; }
    .calc-btn.calc-pressed::after { animation: none; }
}


/* DEV17_EDITABLE_CALCULATOR_MODAL_SAFE_PENDING */
#calc-display.calc-display-editable {
    -webkit-user-select: text;
    user-select: text;
    cursor: text;
    caret-color: #A68A64;
    touch-action: manipulation;
}
.dark #calc-display.calc-display-editable { caret-color: #C5A880; }
#calc-display.calc-display-editable::selection { background: rgba(166, 138, 100, 0.28); }
.dark #calc-display.calc-display-editable::selection { background: rgba(197, 168, 128, 0.30); }

/* O modal de lançamento é um bottom sheet dentro do phone-wrapper.
   Usar % do contêiner evita que vh inclua barras do sistema e esconda o cabeçalho/X. */
#add-modal { box-sizing: border-box; padding-top: 0.75rem; }
#add-modal-panel.cash4ds-transaction-modal-panel { max-height: 90% !important; }

/* DEV-22/3.0.47 — legibilidade, contraste e hierarquia visual
   Objetivo: facilitar a leitura sem redesenhar o app nem alterar comportamento.
   As cores de fundo da identidade permanecem; apenas cores usadas como texto
   ganham contraste suficiente nos fundos claros/escuros predominantes. */
:root {
    --c4ds-text-brand-strong-light: #665B4C;
    --c4ds-text-brand-soft-light: #745F45;
    --c4ds-text-muted-light: #63636A;
    --c4ds-text-muted-soft-light: #66666F;
    --c4ds-text-muted-dark: #86868F;
    --c4ds-text-muted-soft-dark: #8F8F98;
}

/* Bronze é preservado nos fundos e elementos decorativos. Quando é texto,
   usamos um tom mais escuro no modo claro para não desaparecer no bege/cinza. */
.light body .text-brand-activeLight { color: var(--c4ds-text-brand-strong-light) !important; }
.light body .text-brand-light { color: var(--c4ds-text-brand-soft-light) !important; }
.light body .text-brand-activeLight\/75 { color: var(--c4ds-text-brand-soft-light) !important; }
.dark body .text-brand-dark\/75 { color: #C5A880 !important; }

/* Textos auxiliares antes muito claros passam a continuar secundários,
   porém legíveis sobre #FBFBFC, #F8F5F0, #0B0B0B e #111111. */
.light body .text-zinc-400 { color: var(--c4ds-text-muted-soft-light) !important; }
.light body .text-zinc-500 { color: var(--c4ds-text-muted-light) !important; }
.dark body .text-zinc-500 { color: var(--c4ds-text-muted-dark) !important; }
.dark body .text-zinc-600 { color: var(--c4ds-text-muted-soft-dark) !important; }

/* Escala mínima de leitura do Cash4DS. Mantém a hierarquia existente e só
   corrige os degraus muito pequenos, inclusive conteúdo criado via JavaScript. */
body .text-\[8px\] { font-size: 10px !important; }
body .text-\[9px\] { font-size: 10px !important; }
body .text-\[10px\] { font-size: 11px !important; }
body .text-\[11px\] { font-size: 12px !important; }
body .text-\[12px\] { font-size: 13px !important; }
body .text-xs { font-size: 13px !important; }
body .text-\[13px\] { font-size: 14px !important; }

/* Exemplo que originou a ampliação do DEV-22: gaveta Contas no extrato.
   O cabeçalho fica em superfície sólida e o título ganha contraste real. */
.light #account-sidebar { background: #FBFBFC !important; }
.light #account-sidebar > div:first-child { background: #FFFFFF; }
.light #account-sidebar > div:first-child p:first-child {
    color: var(--c4ds-text-brand-strong-light) !important;
    font-size: 14px !important;
}
.light #account-sidebar > div:first-child p:nth-child(2) {
    color: #595960 !important;
    font-size: 12px !important;
}
.light #sidebar-account-count { color: var(--c4ds-text-brand-soft-light) !important; }
.dark #account-sidebar > div:first-child p:first-child { color: #E2CBA9 !important; }
.dark #account-sidebar > div:first-child p:nth-child(2) { color: #B9B9C2 !important; }
.dark #sidebar-account-count { color: #C5A880 !important; }

/* Cabeçalhos dos grupos precisam ser identificáveis sem depender apenas da cor. */
.premium-group-header { font-size: 13px; }