@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,500&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* =====================================================================
   TOKENS — "Cofre" é pensado como um velho baú de família: madeira,
   ferragens de latão, forro esverdeado (verdigris), papel de razão
   (ledger) por dentro. A ideia é que abrir o app pareça abrir esse baú:
   caloroso, íntimo, confiável — não um dashboard fintech genérico.
   ===================================================================== */
:root{
  --paper:#F6EFE1;        /* fundo geral — papel envelhecido */
  --paper-card:#FFFCF4;   /* superfície de cartão — página limpa do razão */
  --paper-sunken:#EFE5D0; /* áreas rebaixadas (inputs, trilhos) */
  --ink:#2B2118;          /* texto principal — tinta marrom escura */
  --ink-soft:#7C6C55;     /* texto secundário */
  --rule:#E3D5B8;         /* linhas/divisórias — borda de papel envelhecido */
  --brass:#B8863C;        /* latão — ação primária, destaque */
  --brass-deep:#8C6428;   /* latão em hover/pressed */
  --brass-tint:#F3E4C4;   /* superfície clara com tom de latão */
  --verdigris:#3F7D63;    /* positivo / crescimento — cobre oxidado */
  --verdigris-tint:#E3EFE6;
  --garnet:#A6432F;       /* negativo / alerta — lacre de cera */
  --garnet-tint:#F5E1DA;
  --radius:12px;          /* inputs e componentes pequenos */
  --radius-lg:18px;       /* cards principais */
  --radius-xl:22px;       /* superfícies grandes (modais, jars) */
  --shadow-card: 0 1px 2px rgba(43,33,24,0.04), 0 6px 20px -14px rgba(43,33,24,0.16);
  --shadow-card-hover: 0 2px 4px rgba(43,33,24,0.05), 0 10px 26px -14px rgba(43,33,24,0.20);
  --shadow-pop: 0 16px 40px -10px rgba(43,33,24,0.26);

  /* Escala de espaçamento — usada para dar mais ar onde a interface
     estiver comprimida, sem inventar valores soltos a cada componente. */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-7:32px;
  --space-8:40px;

  /* Transições — únicas em todo o app, para as microinterações lerem
     como um sistema, não como efeitos soltos por componente. */
  --ease-out: cubic-bezier(.22,1,.36,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --dur-fast: .15s;
  --dur-base: .22s;
  --dur-slow: .45s;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{-webkit-text-size-adjust:100%;}
body{
  background:
    radial-gradient(1200px 600px at 100% -10%, #fffaf0 0%, transparent 60%),
    var(--paper);
  color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  line-height:1.45;
}
h1,h2,h3,.display{font-family:'Newsreader',Georgia,serif; font-weight:600; letter-spacing:-0.01em;}
.mono, .amount, input[type="number"]{font-family:'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric:tabular-nums;}

a{color:inherit;}
:focus-visible{outline:2.5px solid var(--brass); outline-offset:2px; border-radius:6px;}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
}

/* =====================================================================
   BRAND MARK — um dial de fechadura de baú, usado como logomarca.
   ===================================================================== */
.brand{display:flex; align-items:center; gap:9px; font-family:'Newsreader',serif; font-size:21px; font-weight:600; padding:6px 12px 22px 12px; color:var(--ink);}
.brand-mark{width:26px; height:26px; flex-shrink:0;}
.brand .accent{color:var(--brass);}

/* =====================================================================
   LAYOUT
   ===================================================================== */
.app{display:flex; min-height:100vh;}
.sidebar{width:236px; flex-shrink:0; background:var(--paper-card); border-right:1px solid var(--rule); padding:24px 16px; display:flex; flex-direction:column; gap:2px;}
.nav-btn{display:flex; align-items:center; gap:11px; width:100%; padding:10.5px 13px; border-radius:10px; border:none; background:transparent; color:var(--ink-soft); font-size:14px; font-weight:500; text-align:left; cursor:pointer; transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); font-family:'Inter',sans-serif;}
.nav-btn:hover{background:var(--paper-sunken); color:var(--ink);}
.nav-btn.active{background:var(--brass-tint); color:var(--brass-deep); font-weight:600;}
.nav-icon{width:18px; height:18px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;}
.nav-icon svg{width:17px; height:17px;}
.main{flex:1; padding:32px 40px 64px; max-width:1160px; overflow-x:hidden;}
.topbar{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:28px; flex-wrap:wrap; gap:12px;}
.topbar h1{font-size:27px; font-weight:600;}
.month-picker{display:flex; align-items:center; gap:10px; background:var(--paper-card); border:1px solid var(--rule); border-radius:10px; padding:7px 6px;}
.month-picker button{background:none; border:none; color:var(--ink-soft); cursor:pointer; font-size:16px; padding:2px 8px; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);}
.month-picker button:hover{color:var(--brass-deep); background:var(--brass-tint);}
.month-picker button svg{width:15px; height:15px;}
.month-picker .label{font-size:13.5px; font-weight:600; min-width:118px; text-align:center; text-transform:capitalize; font-family:'Newsreader',serif;}

/* Conteúdo de cada aba entra com um fade + leve deslocamento — a troca de
   aba deve parecer viva, sem ficar lenta ou chamativa. */
#tab-content{animation:content-in var(--dur-slow) var(--ease-out);}
@keyframes content-in{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}

.grid{display:grid; gap:16px;}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media(max-width:900px){.grid-4{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:repeat(2,1fr);} .grid-2{grid-template-columns:1fr;}}

/* "Página de razão" — cartão com friso duplo no topo lembrando o
   carimbo/linha de corte de um livro-caixa antigo. */
.card{
  background:var(--paper-card); border:1px solid var(--rule); border-radius:var(--radius-lg);
  padding:22px; position:relative; box-shadow:var(--shadow-card);
  transition:box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.stat-label{font-size:11.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.7px; margin-bottom:9px; font-weight:600;}
.stat-value{font-size:26px; font-weight:600; font-family:'Newsreader',serif; letter-spacing:-0.01em; line-height:1.15;}
/* Número financeiro de maior hierarquia da tela — o dado que a pessoa
   veio ver primeiro (ex.: saldo do mês no topo do dashboard). */
.stat-hero{font-size:40px; font-weight:600; font-family:'Newsreader',serif; letter-spacing:-0.015em; line-height:1.1;}
@media(max-width:600px){.stat-hero{font-size:32px;}}
section{margin-bottom:32px;}
.section-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; flex-wrap:wrap; gap:10px;}
.section-head h2{font-size:18.5px; font-weight:600;}
.sub{font-size:12.5px; color:var(--ink-soft); margin-top:2px;}

.btn{background:var(--brass); color:#2A1D0C; border:none; border-radius:10px; padding:9.5px 17px; font-weight:600; font-size:13.5px; cursor:pointer; transition:background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); font-family:'Inter',sans-serif;}
.btn:hover{background:var(--brass-deep); color:#fff; transform:translateY(-1px); box-shadow:0 4px 12px -4px rgba(140,100,40,0.45);}
.btn:active{transform:translateY(0); box-shadow:none;}
.btn.secondary{background:transparent; border:1px solid var(--rule); color:var(--ink); box-shadow:none;}
.btn.secondary:hover{background:var(--paper-sunken); color:var(--ink); box-shadow:none;}
.btn.gold{background:var(--brass); color:#2A1D0C;}
.btn.danger{background:transparent; border:1px solid var(--garnet); color:var(--garnet); padding:6px 10px; font-size:12px; box-shadow:none;}
.btn.danger:hover{background:var(--garnet-tint); transform:none; box-shadow:none;}
.btn.small{padding:6px 11px; font-size:12.5px;}
.btn:disabled{opacity:0.42; cursor:not-allowed; transform:none; box-shadow:none;}

/* Listas agrupadas: uma única superfície "cartão" contendo várias linhas,
   separadas por um traço fino — em vez de cada item virar sua própria
   caixa. Fica mais sofisticado e reduz o ruído visual de listas longas. */
.row-list{display:flex; flex-direction:column; gap:8px;}
.row-list.list-grouped{
  gap:0; background:var(--paper-card); border:1px solid var(--rule);
  border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-card);
}
.list-grouped .item-row{
  background:transparent; border:none; border-radius:0;
  border-bottom:1px solid var(--rule); padding:13px 18px;
  transition:background var(--dur-fast) var(--ease-out);
}
.list-grouped .item-row:last-child{border-bottom:none;}
.list-grouped .item-row:hover{background:var(--paper-sunken); box-shadow:none;}
.item-row{display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--paper-card); border:1px solid var(--rule); border-radius:11px; padding:12px 14px; flex-wrap:wrap; transition:box-shadow var(--dur-fast) var(--ease-out);}
.item-row:hover{box-shadow:var(--shadow-card);}
.item-left{display:flex; align-items:center; gap:12px; min-width:0;}
.item-tag{font-size:10.5px; padding:3px 8px; border-radius:20px; font-weight:700; text-transform:uppercase; letter-spacing:0.4px; flex-shrink:0;}
.tag-entrada{background:var(--verdigris-tint); color:var(--verdigris);}
.tag-saida{background:var(--garnet-tint); color:var(--garnet);}
.item-desc{font-size:14px; font-weight:600;}
.item-meta{font-size:12px; color:var(--ink-soft);}
.item-amount{font-weight:700; font-size:14.5px; flex-shrink:0; font-family:'IBM Plex Mono',monospace;}
.icon-btn{background:none; border:none; color:var(--ink-soft); cursor:pointer; font-size:14px; padding:6px 7px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);}
.icon-btn:hover{background:var(--garnet-tint); color:var(--garnet);}
.icon-btn svg{width:15px; height:15px;}

.empty{color:var(--ink-soft); font-size:13.5px; padding:30px 20px; text-align:center; border:1.5px dashed var(--rule); border-radius:var(--radius-lg); background:repeating-linear-gradient(135deg, transparent, transparent 10px, rgba(184,134,60,0.035) 10px, rgba(184,134,60,0.035) 20px);}
.empty .empty-title{font-family:'Newsreader',serif; font-size:15.5px; color:var(--ink); font-weight:600; margin-bottom:4px; display:block;}

/* =====================================================================
   DICA DO COFRE — componente educativo, aparece contextualmente em
   cada aba com uma dica curta e prática, no tom de alguém experiente
   te dando um toque, não de manual técnico.
   ===================================================================== */
.tip-card{
  display:flex; gap:12px; align-items:flex-start;
  background:linear-gradient(135deg, var(--verdigris-tint) 0%, var(--paper-card) 70%);
  border:1px solid #CFE0D6; border-left:3px solid var(--verdigris);
  border-radius:var(--radius); padding:14px 18px; margin-bottom:22px;
}
.tip-icon{flex-shrink:0; width:30px; height:30px; border-radius:50%; background:var(--paper-card); border:1px solid #CFE0D6; display:flex; align-items:center; justify-content:center; font-size:15px;}
.tip-label{font-size:10.5px; text-transform:uppercase; letter-spacing:0.6px; font-weight:700; color:var(--verdigris); margin-bottom:3px;}
.tip-text{font-size:13px; color:var(--ink); line-height:1.5;}

/* =====================================================================
   ABA TUTORIAL — texto de destaque (mesma lógica visual do tip-card, tom
   latão em vez de verde pra ler como "fato importante do sistema", não
   como dica) + tópicos expansíveis nativos (<details>), sem JS.
   ===================================================================== */
.callout-highlight{
  background:linear-gradient(135deg, var(--brass-tint) 0%, var(--paper-card) 70%);
  border:1px solid #E6D3A8; border-left:3px solid var(--brass);
  border-radius:var(--radius); padding:16px 18px; margin-bottom:24px;
  font-size:13.5px; color:var(--ink); line-height:1.6;
}
.callout-highlight strong{display:block; margin-bottom:4px; font-family:'Newsreader',serif; font-size:16px; font-weight:600;}
.tutorial-topics{display:flex; flex-direction:column; gap:8px;}
.tutorial-topic{background:var(--paper-card); border:1px solid var(--rule); border-radius:var(--radius-lg); overflow:hidden;}
.tutorial-topic summary{
  list-style:none; cursor:pointer; padding:14px 18px; font-weight:600; font-size:14px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  transition:background var(--dur-fast) var(--ease-out);
}
.tutorial-topic summary::-webkit-details-marker{display:none;}
.tutorial-topic summary:hover{background:var(--paper-sunken);}
.tutorial-topic summary svg{flex-shrink:0; color:var(--ink-soft); transition:transform var(--dur-fast) var(--ease-out);}
.tutorial-topic[open] summary svg{transform:rotate(180deg);}
.tutorial-body{padding:0 18px 16px; font-size:13px; color:var(--ink-soft); line-height:1.6; border-top:1px solid var(--rule); padding-top:12px;}

/* =====================================================================
   GAUGE — mostrador de latão (semicírculo) que resume a saúde
   financeira do mês num relance, como o mostrador de um cofre.
   ===================================================================== */
.gauge-wrap{display:flex; align-items:center; gap:22px; flex-wrap:wrap;}
.gauge-svg{width:180px; height:100px; flex-shrink:0;}
.gauge-needle{transform-origin:90px 90px; transition:transform 1s cubic-bezier(.22,1.4,.36,1);}
.gauge-caption{flex:1; min-width:180px;}
.gauge-status{font-family:'Newsreader',serif; font-size:21px; font-weight:600; margin-bottom:4px;}
.gauge-detail{font-size:12.5px; color:var(--ink-soft); line-height:1.55;}

.jar-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
@media(max-width:900px){.jar-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.jar-grid{grid-template-columns:1fr;}}
.jar-card{background:var(--paper-card); border:1px solid var(--rule); border-radius:var(--radius-lg); padding:18px; display:flex; flex-direction:column; gap:12px; position:relative; box-shadow:var(--shadow-card); transition:box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);}
.jar-card:hover{box-shadow:var(--shadow-card-hover); transform:translateY(-2px);}
.jar-card.jar-complete{border-color:var(--brass);}
.jar-visual{width:100%; height:92px; border-radius:12px; position:relative; overflow:hidden; background:var(--paper-sunken); border:1px solid var(--rule);}
.jar-fill{position:absolute; bottom:0; left:0; right:0; background:linear-gradient(180deg, var(--brass) 0%, var(--brass-deep) 100%); transition:height .7s cubic-bezier(.34,1.56,.64,1); border-radius:0 0 11px 11px;}
.jar-fill::before{content:''; position:absolute; top:0; left:0; right:0; height:3px; background:rgba(255,255,255,0.35);}
.jar-pct{position:absolute; top:8px; right:10px; font-size:11px; font-weight:700; color:var(--ink-soft); z-index:2; font-family:'IBM Plex Mono',monospace;}
.jar-pct.jar-pct-on-fill{color:#fff; text-shadow:0 1px 2px rgba(0,0,0,0.25);}
.jar-name{font-weight:600; font-size:15px; font-family:'Newsreader',serif;}
.jar-nums{display:flex; justify-content:space-between; align-items:baseline;}
.jar-nums .cur{font-size:15px; font-weight:700; color:var(--brass-deep); font-family:'IBM Plex Mono',monospace;}
.jar-nums .goal{font-size:11.5px; color:var(--ink-soft); font-family:'IBM Plex Mono',monospace;}
.jar-actions{display:flex; gap:6px;}
.jar-actions input{width:74px;}
.jar-complete-badge{position:absolute; top:10px; left:10px; background:var(--brass); color:#2A1D0C; font-size:10px; font-weight:700; padding:3px 8px; border-radius:20px; z-index:3; text-transform:uppercase; letter-spacing:0.4px;}

.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px;}
.form-grid.cols-3{grid-template-columns:1fr 1fr 1fr;}
.form-grid.full{grid-template-columns:1fr;}
label{font-size:12px; color:var(--ink-soft); display:block; margin-bottom:5px; font-weight:500;}
input, select, textarea{width:100%; background:var(--paper-sunken); border:1px solid var(--rule); color:var(--ink); border-radius:var(--radius); padding:10px 12px; font-size:13.5px; font-family:'Inter',sans-serif; transition:border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); min-height:40px;}
input:focus, select:focus, textarea:focus{outline:none; border-color:var(--brass); background:var(--paper-card); box-shadow:0 0 0 3px var(--brass-tint);}
.field{display:flex; flex-direction:column;}
.modal-overlay{position:fixed; inset:0; background:rgba(43,33,24,0.44); backdrop-filter:blur(2px); display:flex; align-items:center; justify-content:center; z-index:50; padding:20px; animation:overlay-in var(--dur-base) var(--ease-out);}
@keyframes overlay-in{from{opacity:0;} to{opacity:1;}}
.modal{background:var(--paper-card); border:1px solid var(--rule); border-radius:var(--radius-xl); padding:26px; width:100%; max-width:440px; max-height:88vh; overflow-y:auto; box-shadow:var(--shadow-pop); animation:modal-in var(--dur-base) var(--ease-spring);}
@keyframes modal-in{from{opacity:0; transform:translateY(10px) scale(.97);} to{opacity:1; transform:translateY(0) scale(1);}}
.modal h3{margin-bottom:16px; font-size:19px; font-family:'Newsreader',serif;}
.modal-actions{display:flex; justify-content:flex-end; gap:8px; margin-top:10px;}

.progress-track{height:8px; background:var(--paper-sunken); border-radius:6px; overflow:hidden; border:1px solid var(--rule);}
.progress-fill{height:100%; background:var(--verdigris); border-radius:6px; transition:width .5s ease;}
.dot{width:7px; height:7px; border-radius:50%; flex-shrink:0; display:inline-block;}

.chat-box{background:var(--paper-sunken); border:1px solid var(--rule); border-radius:var(--radius); padding:18px; min-height:140px; font-size:14px; line-height:1.65; white-space:pre-wrap;}
.suggestion-chip{display:inline-block; background:var(--paper-card); border:1px solid var(--rule); border-radius:20px; padding:7px 13px; font-size:12.5px; margin:4px 6px 0 0; cursor:pointer; color:var(--ink-soft); transition:border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);}
.suggestion-chip:hover{border-color:var(--brass); color:var(--brass-deep); background:var(--brass-tint);}

.due-badge{font-size:10.5px; padding:2px 8px; border-radius:20px; font-weight:700; flex-shrink:0;}
.due-ok{background:var(--verdigris-tint); color:var(--verdigris);}
.due-soon{background:var(--brass-tint); color:var(--brass-deep);}
.due-late{background:var(--garnet-tint); color:var(--garnet);}

::-webkit-scrollbar{width:8px;}
::-webkit-scrollbar-thumb{background:var(--rule); border-radius:4px;}
.hint{font-size:12px; color:var(--ink-soft); margin-top:10px; line-height:1.5;}
.mode-toggle{display:flex; gap:8px; margin-bottom:16px;}
.mode-option{flex:1; border:1px solid var(--rule); background:var(--paper-sunken); border-radius:var(--radius); padding:14px; text-align:center; cursor:pointer; font-weight:500; transition:border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);}
.mode-option.selected{border-color:var(--brass); background:var(--brass-tint); color:var(--brass-deep); font-weight:600;}
.top-msg{color:var(--ink-soft); padding:40px; font-size:14px;}

.auth-wrap{max-width:420px; margin:56px auto; padding:0 16px; animation:content-in var(--dur-slow) var(--ease-out);}
.auth-hero{text-align:center; margin-bottom:10px;}
.auth-hero .brand-mark{width:46px; height:46px; margin:0 auto 12px;}
.auth-hero p{color:var(--ink-soft); font-size:13.5px; margin-top:6px; line-height:1.5;}
.auth-tabs{display:flex; gap:8px; margin-bottom:18px;}
.auth-tab{flex:1; text-align:center; padding:10px; border-radius:var(--radius); cursor:pointer; color:var(--ink-soft); font-size:13.5px; font-weight:600; background:var(--paper-sunken); border:1px solid var(--rule); transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);}
.auth-tab.active{background:var(--brass-tint); color:var(--brass-deep); border-color:var(--brass);}
.error-msg{color:var(--garnet); font-size:12.5px; margin-bottom:10px; min-height:14px;}
.role-badge{font-size:10px; padding:2px 7px; border-radius:20px; background:var(--brass-tint); color:var(--brass-deep); font-weight:700; text-transform:uppercase;}

/* Consentimento LGPD — caixa de marcação simples no cadastro. */
.consent-row{display:flex; align-items:flex-start; gap:9px; margin:14px 0 6px; padding:12px 13px; background:var(--paper-sunken); border:1px solid var(--rule); border-radius:var(--radius);}
.consent-row input[type="checkbox"]{width:17px; height:17px; min-height:0; flex-shrink:0; margin-top:1px; accent-color:var(--brass-deep); cursor:pointer;}
.consent-row label{font-size:12px; color:var(--ink-soft); line-height:1.55; margin:0; font-weight:400; cursor:pointer;}
.consent-row a, .consent-link{color:var(--brass-deep); font-weight:600; cursor:pointer; text-decoration:underline; text-underline-offset:2px;}

/* Celebração ao completar uma caixinha — um único momento orquestrado,
   não confete solto pela tela toda. */
.confetti-burst{position:absolute; inset:0; pointer-events:none; overflow:visible;}
.confetti-piece{position:absolute; top:40%; left:50%; width:6px; height:10px; opacity:0; border-radius:1px;}
@keyframes confetti-fall{
  0%{opacity:1; transform:translate(0,0) rotate(0deg);}
  100%{opacity:0; transform:translate(var(--dx), var(--dy)) rotate(var(--rot));}
}
.confetti-piece.go{animation:confetti-fall 900ms ease-out forwards;}

/* =====================================================================
   MAPA DE GASTOS — donut de categorias + legenda com barras, primeira
   coisa que aparece ao entrar no app.
   ===================================================================== */
.spending-map{display:flex; gap:28px; align-items:center; flex-wrap:wrap;}
.spending-donut-wrap{position:relative; width:148px; height:148px; flex-shrink:0;}
.spending-donut{width:100%; height:100%; border-radius:50%; box-shadow:inset 0 0 0 1px var(--rule);}
.spending-donut-hole{position:absolute; inset:22px; border-radius:50%; background:var(--paper-card); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; box-shadow:0 1px 3px rgba(43,33,24,0.12);}
.spending-donut-total{font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:14.5px; color:var(--ink);}
.spending-donut-label{font-size:9.5px; color:var(--ink-soft); margin-top:2px; text-transform:uppercase; letter-spacing:0.4px;}
.spending-legend{flex:1; min-width:220px; display:flex; flex-direction:column; gap:10px;}
.spending-legend-row{display:flex; align-items:center; gap:10px;}
.spending-dot{width:9px; height:9px; border-radius:50%; flex-shrink:0;}
.spending-legend-info{flex:1; min-width:0;}
.spending-legend-top{display:flex; justify-content:space-between; gap:8px; font-size:12.5px;}
.spending-legend-name{font-weight:600; color:var(--ink);}
.spending-legend-amount{font-family:'IBM Plex Mono',monospace; color:var(--ink-soft); flex-shrink:0;}
.spending-legend-pct{font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--ink-soft); width:34px; text-align:right; flex-shrink:0;}
@media(max-width:600px){
  .spending-map{flex-direction:column; align-items:center; text-align:center;}
  .spending-legend{width:100%; text-align:left;}
}

/* =====================================================================
   MENU LATERAL (DRAWER) NO MOBILE — mesmas cores do sidebar de desktop,
   só que escondido fora da tela e revelado por um ícone de hambúrguer,
   em vez da barra horizontal fixa no topo.
   ===================================================================== */
.hamburger-btn{
  display:none; background:var(--paper-card); border:1px solid var(--rule); color:var(--ink);
  width:40px; height:40px; border-radius:var(--radius); align-items:center; justify-content:center;
  cursor:pointer; flex-shrink:0; transition:background var(--dur-fast) var(--ease-out);
}
.hamburger-btn:hover{background:var(--paper-sunken);}
.hamburger-btn svg{width:19px; height:19px;}
.sidebar-top{display:flex; align-items:center; justify-content:space-between; padding:0 2px 20px;}
.sidebar-top .brand{padding:0;}
.sidebar-close{display:none;}
.sidebar-backdrop{display:none;}

@media(max-width:760px){
  .app{flex-direction:column;}
  .hamburger-btn{display:inline-flex;}

  .sidebar-backdrop{
    display:block; position:fixed; inset:0; background:rgba(43,33,24,0.38);
    z-index:55; opacity:0; pointer-events:none; transition:opacity .25s ease;
  }
  .sidebar-backdrop.show{opacity:1; pointer-events:auto;}

  .sidebar{
    position:fixed; top:0; left:0; bottom:0; width:260px; max-width:82vw;
    flex-direction:column; overflow-x:hidden; overflow-y:auto;
    border-right:1px solid var(--rule); border-bottom:none;
    box-shadow:var(--shadow-pop);
    transform:translateX(-100%);
    transition:transform .28s cubic-bezier(.22,1,.36,1);
    z-index:60; padding:18px 14px;
  }
  .sidebar.open{transform:translateX(0);}

  .sidebar-top{padding:0 2px 14px;}
  .sidebar-close{display:inline-flex; align-items:center; justify-content:center; background:none; border:none; color:var(--ink-soft); cursor:pointer; padding:8px; border-radius:8px; width:38px; height:38px;}
  .sidebar-close:hover{background:var(--paper-sunken); color:var(--ink);}
  .sidebar-close svg{width:17px; height:17px;}

  .nav-btn{flex-direction:row; font-size:14.5px; padding:12px 13px; white-space:normal; gap:11px; justify-content:flex-start; min-height:44px;}
  .main{padding:20px 16px 56px;}
  .gauge-wrap{justify-content:center; text-align:center;}
  .btn{min-height:42px;}
  .icon-btn{min-width:36px; min-height:36px;}
}


/* =====================================================================
   CATEGORIAS, TABELA DE ORÇAMENTO E GRÁFICO ORÇADO × REALIZADO
   A cor de cada categoria vem sempre do cadastro central (category.color),
   nunca é definida aqui — o CSS só fornece a forma.
   ===================================================================== */
.cat-dot{width:9px; height:9px; border-radius:50%; display:inline-block; flex-shrink:0; margin-right:6px; vertical-align:baseline;}
.cat-chip{display:inline-flex; align-items:center;}
.inline-link{background:none; border:none; color:var(--brass-deep); font-size:11.5px; font-weight:600; cursor:pointer; padding:0 0 0 6px; font-family:'Inter',sans-serif;}
.inline-link:hover{text-decoration:underline;}
.over-tag{display:inline-block; margin-left:6px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.4px; color:var(--garnet); background:var(--garnet-tint); padding:2px 7px; border-radius:20px;}
.inactive-tag{display:inline-block; margin-left:6px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.4px; color:var(--ink-soft); background:var(--paper-sunken); padding:2px 7px; border-radius:20px;}

/* Barra de filtros */
.filter-bar{display:flex; gap:14px; align-items:flex-end; flex-wrap:wrap; background:var(--paper-card); border:1px solid var(--rule); border-radius:var(--radius-lg); padding:14px 16px; margin-bottom:20px;}
.filter-group{display:flex; flex-direction:column; min-width:150px;}
.filter-group label{margin-bottom:4px;}
.filter-group select{background:var(--paper-sunken);}
.filter-note{font-size:11.5px; color:var(--ink-soft); margin-left:auto; padding-bottom:9px;}

/* Tabela Orçamento / Gasto / Saldo */
.budget-table{border:1px solid var(--rule); border-radius:var(--radius-lg); overflow:hidden; background:var(--paper-card);}
.budget-row{display:grid; grid-template-columns:2fr 1fr 1fr 1fr 70px; gap:10px; align-items:center; padding:12px 16px; border-bottom:1px solid var(--rule);}
.budget-row:last-child{border-bottom:none;}
.budget-head{background:var(--paper-sunken); font-size:11px; text-transform:uppercase; letter-spacing:0.6px; color:var(--ink-soft); font-weight:700;}
.budget-head span:not(:first-child){text-align:right;}
.budget-row.is-over{background:linear-gradient(90deg, var(--garnet-tint) 0%, transparent 60%);}
.budget-cat{display:flex; align-items:center; font-weight:600; font-size:13.5px; flex-wrap:wrap;}
.budget-num{text-align:right; font-family:'IBM Plex Mono',monospace; font-size:13px;}
.budget-num.neg{color:var(--garnet); font-weight:700;}
.budget-num.pos{color:var(--verdigris);}
.budget-actions{display:flex; gap:2px; justify-content:flex-end;}

/* Gráfico de barras agrupadas */
.chart-legend{display:flex; gap:14px; align-items:center; font-size:11.5px; color:var(--ink-soft);}
.chart-legend-item{display:inline-flex; align-items:center; gap:5px;}
.chart-swatch{width:11px; height:11px; border-radius:3px; display:inline-block;}
.swatch-planned{background:var(--paper-sunken); border:1.5px solid var(--ink-soft);}
.swatch-actual{background:var(--brass);}
.bar-chart{display:flex; flex-direction:column; gap:16px; margin-top:14px;}
.bar-group-head{display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:6px; flex-wrap:wrap;}
.bar-group-name{font-size:13px; font-weight:600; display:inline-flex; align-items:center;}
.bar-group-delta{font-size:11.5px; color:var(--verdigris); font-family:'IBM Plex Mono',monospace;}
.bar-group-delta.is-over{color:var(--garnet); font-weight:700;}
.bar-line{display:flex; align-items:center; gap:10px; margin-bottom:4px;}
.bar-track{flex:1; height:14px; background:var(--paper-sunken); border:1px solid var(--rule); border-radius:5px; overflow:hidden;}
.bar-fill{height:100%; border-radius:4px; transition:width .5s ease;}
.bar-planned{background:repeating-linear-gradient(45deg, var(--rule), var(--rule) 5px, var(--paper-sunken) 5px, var(--paper-sunken) 10px); border-right:2px solid var(--ink-soft);}
.bar-actual{background:var(--brass);}
.bar-actual.is-over{background:var(--garnet);}
.bar-value{font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--ink-soft); width:88px; text-align:right; flex-shrink:0;}

/* Gerenciador de categorias */
.cat-manager{display:flex; flex-direction:column; gap:2px; max-height:46vh; overflow-y:auto; border:1px solid var(--rule); border-radius:var(--radius); padding:6px; margin-bottom:14px;}
.cat-manager-row{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 10px; border-radius:8px; transition:background var(--dur-fast) var(--ease-out);}
.cat-manager-row:hover{background:var(--paper-sunken);}
.cat-manager-name{display:flex; align-items:center; font-size:13.5px; font-weight:500; min-width:0;}
.cat-manager-meta{display:block; font-size:11px; color:var(--ink-soft); font-weight:400; margin-top:1px;}
.cat-manager-actions{display:flex; gap:2px; flex-shrink:0;}
.cat-color-note{display:flex; align-items:center; gap:2px; font-size:11.5px; color:var(--ink-soft); background:var(--paper-sunken); border:1px solid var(--rule); border-radius:9px; padding:9px 11px; margin-bottom:12px; line-height:1.45;}

@media(max-width:760px){
  .budget-row{grid-template-columns:1.6fr 1fr 1fr; row-gap:4px;}
  .budget-head span:nth-child(4), .budget-head span:nth-child(5){display:none;}
  .budget-row > .budget-num:nth-child(4){grid-column:2 / span 2; text-align:right;}
  .budget-actions{grid-column:1 / -1; justify-content:flex-start;}
  .filter-note{margin-left:0; padding-bottom:0;}
  .bar-value{width:74px;}
}

/* =====================================================================
   SALDO EM DESTAQUE — número financeiro de maior protagonismo do
   dashboard, precedendo qualquer outra informação.
   ===================================================================== */
.hero-balance{
  display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding-bottom:6px; margin-bottom:22px;
}
.hero-balance .stat-label{margin-bottom:6px;}
.hero-balance-secondary{display:flex; gap:22px; flex-wrap:wrap;}
.hero-balance-secondary .mini-stat{text-align:right;}
.mini-stat-label{font-size:11px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.5px; font-weight:600; margin-bottom:3px;}
.mini-stat-value{font-size:16px; font-weight:700; font-family:'IBM Plex Mono',monospace;}
@media(max-width:600px){
  .hero-balance{flex-direction:column; align-items:flex-start;}
  .hero-balance-secondary{width:100%; justify-content:space-between; gap:14px;}
  .hero-balance-secondary .mini-stat{text-align:left;}
}

/* =====================================================================
   SPLASH SCREEN — abertura curta e elegante do app, com a marca, o nome
   e uma frase que muda a cada visita. Não é uma tela de loading: some
   assim que a animação termina (ou antes, se o app já estiver pronto).
   ===================================================================== */
#splash{
  position:fixed; inset:0; z-index:200; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:18px;
  background:
    radial-gradient(1000px 560px at 50% -10%, #fffaf0 0%, transparent 60%),
    var(--paper);
  transition:opacity .5s var(--ease-out), visibility .5s var(--ease-out);
}
#splash.splash-hide{opacity:0; visibility:hidden; pointer-events:none;}
.splash-mark{width:64px; height:64px; animation:splash-breathe 2.6s var(--ease-out) infinite;}
.splash-mark circle, .splash-mark line{stroke:var(--brass);}
@keyframes splash-breathe{
  0%, 100%{transform:scale(1); opacity:1;}
  50%{transform:scale(1.06); opacity:0.85;}
}
.splash-word{font-family:'Newsreader',serif; font-size:26px; font-weight:600; color:var(--ink); letter-spacing:-0.01em; opacity:0; animation:splash-fade-up .6s var(--ease-out) .15s forwards;}
.splash-word .accent{color:var(--brass);}
.splash-phrase{font-family:'Newsreader',serif; font-style:italic; font-size:14px; color:var(--ink-soft); text-align:center; max-width:280px; line-height:1.5; opacity:0; animation:splash-fade-up .6s var(--ease-out) .35s forwards;}
.splash-phrase .ref{display:block; font-style:normal; font-size:10.5px; color:var(--ink-soft); opacity:0.75; margin-top:4px; letter-spacing:0.3px; text-transform:uppercase; font-family:'Inter',sans-serif;}
@keyframes splash-fade-up{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}
@media (prefers-reduced-motion: reduce){
  .splash-mark{animation:none;}
  .splash-word, .splash-phrase{animation:none; opacity:1;}
}

/* =====================================================================
   CARTÕES — painel por cartão (limite, fatura atual/próxima) e o status
   da fatura. A cor de cada friso lateral vem do cadastro (auto-atribuída),
   igual ao esquema já usado pelas categorias.
   ===================================================================== */
.card-panel{padding:18px;}
.card-panel .btn.secondary.small{width:100%; text-align:left; font-weight:500;}
.card-inactive{opacity:0.55;}

.invoice-badge{font-size:10.5px; padding:2px 8px; border-radius:20px; font-weight:700; text-transform:uppercase; letter-spacing:0.4px; display:inline-block;}
.invoice-aberta{background:var(--brass-tint); color:var(--brass-deep);}
.invoice-fechada{background:var(--paper-sunken); color:var(--ink-soft);}
.invoice-paga{background:var(--verdigris-tint); color:var(--verdigris);}
.invoice-atrasada{background:var(--garnet-tint); color:var(--garnet);}

/* =====================================================================
   AUDITORIA — linha do tempo de ações. As pastilhas de diff reaproveitam
   o tom "razão contábil" do resto do app (mono para os valores).
   ===================================================================== */
.audit-diff{display:flex; flex-wrap:wrap; gap:6px; margin-top:7px;}
.audit-diff-chip{
  font-size:11px; padding:3px 9px; border-radius:20px; background:var(--paper-sunken);
  color:var(--ink-soft); font-family:'IBM Plex Mono',monospace;
}
.audit-tag-criou{background:var(--verdigris-tint); color:var(--verdigris);}
.audit-tag-editou{background:var(--brass-tint); color:var(--brass-deep);}
.audit-tag-excluiu{background:var(--garnet-tint); color:var(--garnet);}
.audit-tag-pagou{background:var(--verdigris-tint); color:var(--verdigris);}
.audit-tag-estornou{background:var(--garnet-tint); color:var(--garnet);}
.audit-tag-ativou{background:var(--verdigris-tint); color:var(--verdigris);}
.audit-tag-desativou{background:var(--paper-sunken); color:var(--ink-soft);}

/* =====================================================================
   ENTRADAS & SAÍDAS — compra no cartão aparece como 1 linha só (valor
   cheio, mês da compra), marcada como "ainda não debitada" pra não ser
   confundida com dinheiro que já saiu de fato da conta.
   ===================================================================== */
.pending-badge{
  font-size:10px; padding:1px 7px; border-radius:20px; font-weight:600;
  background:var(--paper-sunken); color:var(--ink-soft); white-space:nowrap;
  vertical-align:middle; margin-left:4px; display:inline-block;
}

/* =====================================================================
   BANNER DE FEEDBACK — card fixo no topo da aba Cartões (substitui o
   antigo toast de canto). Fica no fluxo normal da página, não sobrepõe
   conteúdo, e some (localStorage) ao clicar no X ou no botão de ação.
   ===================================================================== */
.feedback-banner{
  display:flex; gap:12px; align-items:center; margin-bottom:16px;
  padding:14px 16px;
}
.notice-icon{
  flex-shrink:0; width:34px; height:34px; border-radius:50%;
  background:var(--brass-tint); color:var(--brass-deep);
  display:flex; align-items:center; justify-content:center;
}
.notice-body{ flex:1; min-width:0; }
.notice-title{ font-weight:700; font-size:13.5px; margin-bottom:2px; color:var(--ink); }
.notice-text{ font-size:12.5px; color:var(--ink-soft); line-height:1.45; }
.notice-close{
  flex-shrink:0; background:none; border:none; cursor:pointer; color:var(--ink-soft);
  padding:3px; border-radius:6px; display:flex;
}
.notice-close:hover{ background:var(--paper-sunken); }
@media (max-width:640px){
  .feedback-banner{ flex-wrap:wrap; }
  .notice-body{ order:1; flex-basis:100%; }
  .feedback-banner > .btn{ order:2; }
  .notice-close{ order:3; margin-left:auto; }
}

/* Modal "Novidades" — uma feature por linha (ícone + texto + ação),
   reaproveitando .notice-icon/.notice-body/.notice-title/.notice-text
   acima, separadas por um traço fino em vez de virar cartões isolados. */
.feature-item{ display:flex; gap:12px; align-items:center; padding:14px 0; border-bottom:1px solid var(--rule); }
.feature-item:last-child{ border-bottom:none; padding-bottom:6px; }
.feature-item .btn{ flex-shrink:0; }
@media (max-width:480px){
  .feature-item{ flex-wrap:wrap; }
  .feature-item .notice-body{ order:1; flex-basis:calc(100% - 46px); }
  .feature-item .btn{ order:2; margin-left:46px; }
}

/* =====================================================================
   TOASTS FLUTUANTES — componente genérico no canto da tela, reaproveitado
   pelo aviso de instalar o PWA e pelo aviso minimalista de feedback (ambos
   usam .notice-icon/.notice-body/.notice-title/.notice-text/.notice-close
   acima). Empilham via JS (repositionFloatingToasts ajusta `bottom`).
   ===================================================================== */
.floating-toast{
  position:fixed; right:20px; bottom:20px; z-index:200; max-width:340px;
  display:flex; gap:12px; align-items:flex-start;
  background:var(--paper-card); border:1px solid var(--rule); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-pop); padding:14px 16px;
  opacity:0; transform:translateY(12px);
  transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), bottom var(--dur-base) var(--ease-out);
  pointer-events:none;
}
.floating-toast.show{ opacity:1; transform:translateY(0); pointer-events:auto; }
.floating-toast.clickable .notice-body{ cursor:pointer; }
@media (max-width:640px){
  .floating-toast{ left:16px; right:16px; max-width:none; }
}

/* =====================================================================
   FEEDBACK — formulário do cliente e painel do admin.
   ===================================================================== */
.star-rating{ display:flex; gap:4px; }
.star-btn{
  width:auto; min-height:0; background:none; border:none; padding:2px;
  color:var(--rule); cursor:pointer; transition:color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.star-btn:hover{ color:var(--brass); transform:scale(1.08); }
.star-btn.filled{ color:var(--brass-deep); }
.star-btn.filled svg{ fill:var(--brass-deep); }
.field-hint{ font-size:11.5px; color:var(--ink-soft); text-align:right; margin-top:4px; }
.feedback-success{ max-width:520px; margin:0 auto; text-align:center; padding:32px 24px; }
.feedback-success-icon{
  width:56px; height:56px; margin:0 auto 12px; border-radius:50%;
  background:var(--verdigris-tint); color:var(--verdigris);
  display:flex; align-items:center; justify-content:center;
}
.star-rating-mini{ display:flex; gap:1px; color:var(--rule); flex-shrink:0; }
.star-rating-mini .filled{ color:var(--brass-deep); }
.star-rating-mini .filled svg{ fill:var(--brass-deep); }
.feedback-admin-row{ transition:background var(--dur-fast) var(--ease-out); }
.feedback-admin-row:hover{ background:var(--paper-sunken); }
.feedback-chevron{ color:var(--ink-soft); display:flex; transition:transform var(--dur-fast) var(--ease-out); }
.feedback-chevron.open{ transform:rotate(180deg); }
.feedback-admin-detail{ margin-top:10px; padding-top:10px; border-top:1px solid var(--rule); }
.feedback-admin-message{ font-size:13.5px; color:var(--ink); line-height:1.55; margin-top:6px; white-space:pre-wrap; }