body { font-family: 'Inter', sans-serif; background-color: #f8fafc; -webkit-tap-highlight-color: transparent; }
.nav-active { color: #4f46e5 !important; font-weight: 600; }
.escondido { display: none !important; }
.fade-in { animation: fadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.barra-estourada { background: repeating-linear-gradient(45deg, #ef4444, #ef4444 8px, #dc2626 8px, #dc2626 16px); }
.soft-shadow { box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05); }
.modal-enter { animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

@keyframes blob {
  0% { transform: translate(0px, 0px) scale(1); }
  33% { transform: translate(30px, -50px) scale(1.1); }
  66% { transform: translate(-20px, 20px) scale(0.9); }
  100% { transform: translate(0px, 0px) scale(1); }
}
.animate-blob { animation: blob 7s infinite; }
.animation-delay-2000 { animation-delay: 2s; }
.animation-delay-4000 { animation-delay: 4s; }

/* Respeita a barra de status (topo) e a barra de gestos (embaixo) quando o app ocupa a tela inteira.
   No navegador e no app antigo esses valores são 0. */
body { padding-top: env(safe-area-inset-top); padding-bottom: calc(6rem + env(safe-area-inset-bottom)) !important; overscroll-behavior-y: none; }
.topo-seguro { top: calc(1rem + env(safe-area-inset-top)); }
.safe-bottom { padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)) !important; }
.acima-nav { bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
/* Plano grátis no app: banner do AdMob logo acima da barra de gestos, e a barra de navegação sobe junto (anuncios.js) */
.com-anuncio body { padding-bottom: calc(6rem + env(safe-area-inset-bottom) + var(--altura-anuncio, 60px)) !important; }
.com-anuncio #barra-nav { bottom: calc(env(safe-area-inset-bottom) + var(--altura-anuncio, 60px)); padding-bottom: 1rem !important; border-radius: 1.5rem 1.5rem 0 0; }
.com-anuncio .acima-nav { bottom: calc(5.5rem + env(safe-area-inset-bottom) + var(--altura-anuncio, 60px)); }

/* Modo empresa (PRO Negócios): cabeçalho verde para nunca confundir com o Pessoal */
.modo-empresa #cabecalho { background: linear-gradient(135deg, #047857, #0d9488) !important; }
.modo-empresa #cabecalho .text-indigo-200, .modo-empresa #cabecalho .text-indigo-100 { color: #ccfbf1; }
.modo-empresa #barra-nav .bg-indigo-600 { background-color: #059669; box-shadow: 0 10px 15px -3px rgba(5, 150, 105, .4); }
.modo-empresa #barra-nav .nav-active { color: #059669 !important; }

/* Botões segmentados (Despesa/Receita, Pago/Pendente...) */
.seg { display: flex; background: #f1f5f9; border-radius: 0.9rem; padding: 4px; gap: 4px; }
.seg button { flex: 1; padding: 0.55rem 0.25rem; border-radius: 0.7rem; font-size: 0.8rem; font-weight: 700; color: #64748b; transition: all .15s; }
.seg button.ativo { background: #fff; color: #4338ca; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.seg.seg-despesa button.ativo { color: #e11d48; }
.seg.seg-receita button.ativo { color: #059669; }

/* Escolha de categoria com ícones */
.chip-cat { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px 6px 6px; border-radius: 999px; border: 1px solid #e2e8f0; background: #fff; font-size: 12px; font-weight: 600; color: #475569; transition: all .15s; }
.chip-cat .bola { width: 24px; height: 24px; border-radius: 999px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; }
.chip-cat.ativo { border-color: #4f46e5; background: #eef2ff; color: #3730a3; box-shadow: 0 0 0 2px #c7d2fe; }

.icone-opcao { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #f1f5f9; color: #475569; }
.icone-opcao.ativo { background: #4f46e5; color: #fff; }
.cor-opcao { width: 30px; height: 30px; border-radius: 999px; border: 3px solid #fff; box-shadow: 0 0 0 1px #e2e8f0; }
.cor-opcao.ativo { box-shadow: 0 0 0 2px #1e293b; }

.cartao-visual { border-radius: 1.25rem; color: #fff; padding: 1.1rem 1.25rem; position: relative; overflow: hidden; }
.cartao-visual::after { content: ''; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; border-radius: 999px; background: rgba(255,255,255,.12); }

input[type=checkbox].check { width: 20px; height: 20px; accent-color: #4f46e5; flex-shrink: 0; }

/* Bichinho financeiro: pula de leve quando está feliz, respira quando está tranquilo, balança com carinho */
.mascote { overflow: visible; }
.mascote-anima { transform-box: fill-box; transform-origin: center; }
.mascote-pula { animation: mascotePula 2.6s ease-in-out infinite; }
.mascote-respira { animation: mascoteRespira 4s ease-in-out infinite; }
.mascote-carinho { animation: mascoteCarinho 0.6s ease-in-out; }
@keyframes mascotePula { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes mascoteRespira { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }
@keyframes mascoteCarinho { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }
@media (prefers-reduced-motion: reduce) { .mascote-pula, .mascote-respira, .mascote-carinho { animation: none; } }

/* Jogos do Fin: a peça que acabou de chegar brilha */
.peca-nova { animation: peca-nova 1.4s ease-out 1; }
@keyframes peca-nova { 0% { background: rgba(250, 204, 21, .85); } 100% { background: transparent; } }

/* Junta Peças do Fin: peças com sombra de "pilha", cobertas escurecidas, bandeja de 7 lugares.
   Animações só com transform/opacity (rodam liso no celular). */
.jp-tabuleiro { position: relative; touch-action: manipulation; }
.peca-jp-pos { position: absolute; width: calc(var(--casa) * 2); height: calc(var(--casa) * 2); padding: 2px; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.peca-jp { width: 100%; height: 100%; border-radius: 22%; background: #fff; border: 1.5px solid #e2e8f0; box-shadow: 0 3px 0 #cbd5e1, 0 6px 10px rgba(15, 23, 42, .12); display: flex; align-items: center; justify-content: center; overflow: hidden; transition: transform .12s ease, filter .15s ease; }
.peca-jp svg { pointer-events: none; }
.peca-jp .mascote-anima { animation: none !important; }
.peca-jp-pos:not(.coberta):active .peca-jp { transform: scale(.92); }
.peca-jp-pos.coberta { cursor: default; }
.peca-jp-pos.coberta .peca-jp { filter: brightness(.62) saturate(.6); box-shadow: 0 2px 0 #94a3b8; }
.peca-jp-pos.focada .peca-jp { outline: 3px solid #10b981; outline-offset: 1px; transform: translateY(-3px); }
.jp-bandeja { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; padding: 6px; border-radius: 16px; background: #fef3c7; border: 2px solid #fcd34d; transition: border-color .2s, background .2s; }
.jp-bandeja.quase-cheia { border-color: #f87171; background: #fee2e2; }
.casa-bandeja { aspect-ratio: 1; border-radius: 10px; background: rgba(255, 255, 255, .55); }
.casa-bandeja .peca-jp { box-shadow: 0 2px 0 #cbd5e1; }
.casa-bandeja .peca-jp i { font-size: 1.15rem !important; }
.casa-bandeja .peca-jp svg { width: 90% !important; height: 90% !important; }
.peca-jp.chegou { animation: jp-chegou .18s ease-out; }
.peca-jp.sumindo { animation: jp-sumindo .16s ease-in forwards; }
@keyframes jp-chegou { from { transform: scale(.4); opacity: .3; } to { transform: scale(1); opacity: 1; } }
@keyframes jp-sumindo { to { transform: scale(1.35); opacity: 0; } }
.tema-escuro .peca-jp { background: #f8fafc; }

/* ==========================================
   VERSÃO PARA COMPUTADOR (1024 px ou mais, nunca no app Android: html.app-nativo)
   Menu lateral fixo, cabeçalho no topo do conteúdo, telas largas, Início em 2 colunas,
   Mais em 4 colunas, Extrato em tabela (extrato.js) e janelas no centro da tela.
   ========================================== */
.so-desktop { display: none !important; }
.menu-lateral { display: none; }
.item-lateral { width: 100%; display: flex; align-items: center; gap: .65rem; padding: .55rem .75rem; border-radius: .8rem; font-size: .875rem; font-weight: 600; color: #475569; transition: background .12s, color .12s; }
.item-lateral:hover { background: #f1f5f9; color: #1e293b; }
.item-lateral.ativo { background: #eef2ff; color: #4338ca; }
.item-lateral.ativo i { color: #4f46e5; }
.item-lateral i { color: #94a3b8; }
.grupo-lateral { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #94a3b8; padding: 1rem .75rem .35rem; }
.tabela-extrato th { text-align: left; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #94a3b8; padding: .8rem 1rem; background: #f8fafc; border-bottom: 1px solid #f1f5f9; }
.tabela-extrato td { padding: .7rem 1rem; border-bottom: 1px solid #f1f5f9; max-width: 320px; }
.tabela-extrato tbody tr { cursor: pointer; transition: background .1s; }
.tabela-extrato tbody tr:hover { background: #f8fafc; }
.tabela-extrato tbody tr:last-child td { border-bottom: 0; }

@media (min-width: 1024px) {
  html:not(.app-nativo) body { display: block; padding-bottom: 0 !important; background: #f1f5f9; }
  html:not(.app-nativo) #app-container { max-width: none; padding-left: 264px; background: #f1f5f9; overflow-x: visible; }
  html:not(.app-nativo) .menu-lateral { display: flex; flex-direction: column; position: fixed; left: 0; top: 0; bottom: 0; width: 264px; padding: 1.25rem 1rem; background: #fff; border-right: 1px solid #e2e8f0; overflow-y: auto; z-index: 45; }
  html:not(.app-nativo) .so-desktop { display: inline-flex !important; }
  html:not(.app-nativo) #barra-nav { display: none !important; }
  html:not(.app-nativo) #cabecalho { border-radius: 0 0 2rem 2rem; padding: 1.75rem 2.5rem 3.5rem; }
  html:not(.app-nativo) #cabecalho > div { max-width: 1180px; margin: 0 auto; }
  html:not(.app-nativo) #titulo-tela { font-size: 1.85rem; }
  html:not(.app-nativo) .tela { max-width: 1180px; margin: 0 auto; padding: 1.5rem 2.5rem 3rem !important; }
  /* Telas de lista ficam numa largura confortável de leitura */
  html:not(.app-nativo) .tela:not(#tela-inicio):not(#tela-extrato):not(#tela-mais):not(#tela-jogos):not(#tela-insights):not(#tela-calculadoras) { max-width: 920px; }
  html:not(.app-nativo) .inicio-blocos { column-count: 2; column-gap: 1.5rem; }
  html:not(.app-nativo) .inicio-blocos > * { break-inside: avoid; }
  html:not(.app-nativo) #tela-mais .grade-mais { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html:not(.app-nativo) #tela-mais .grade-mais .item-mais { border-top: 0; border-bottom: 1px solid #f1f5f9; }
  html:not(.app-nativo) #tela-mais .grade-mais .item-mais:nth-child(odd) { border-right: 1px solid #f1f5f9; }
  /* Janelas (formulários) no centro, em vez de subir de baixo */
  html:not(.app-nativo) #modal { align-items: center; padding: 2rem; }
  html:not(.app-nativo) #modal > div { max-width: 560px; border-radius: 2rem; max-height: 88vh; animation: popIn .18s ease-out; }
  html:not(.app-nativo) #modal > div > .w-12.h-1\.5 { display: none; }
  html:not(.app-nativo) .acima-nav { bottom: 1.5rem; }
  html:not(.app-nativo) #anuncio-web { left: 264px !important; }
  html:not(.app-nativo) .jp-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 2rem; align-items: center; }
  html:not(.app-nativo) .jp-lateral .jp-bandeja { margin-top: 0; }
  html:not(.app-nativo) .lojinha-grade { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  html:not(.app-nativo) #tela-login, html:not(.app-nativo) #tela-cadastro, html:not(.app-nativo) #tela-carregando { margin: 0 auto; }
}
@keyframes popIn { from { opacity: 0; transform: scale(.97) translateY(8px); } to { opacity: 1; transform: none; } }
/* Computador no modo escuro */
html.tema-escuro .menu-lateral { background: #171c2f; border-color: #232a40; }
html.tema-escuro .item-lateral { color: #c3c9d9; }
html.tema-escuro .item-lateral:hover { background: #232a40; color: #eef0f7; }
html.tema-escuro .item-lateral.ativo { background: #262c55; color: #c7d2fe; }
html.tema-escuro .tabela-extrato th { background: #10142a; border-color: #232a40; }
html.tema-escuro .tabela-extrato td { border-color: #232a40; }
html.tema-escuro .tabela-extrato tbody tr:hover { background: #1d2340; }
@media (min-width: 1024px) {
  html.tema-escuro:not(.app-nativo) body, html.tema-escuro:not(.app-nativo) #app-container { background: #0c0f1a !important; }
}

/* Listas do Mais (uma linha por item, separadas por uma linha fina) */
.item-mais + .item-mais { border-top: 1px solid #f1f5f9; }
html.tema-escuro .item-mais, html.tema-escuro .item-mais + .item-mais { border-color: #232a40 !important; }
html.tema-escuro .item-mais:hover { background: #1d2340; }