:root {
  --fundo: #f6f5f1;
  --superficie: #ffffff;
  --texto: #1d1d1b;
  --suave: #6b6a65;
  --borda: #dedcd5;
  --acento: #1f6f5c;
  --acento-texto: #ffffff;
  --erro: #a3271f;
  --erro-fundo: #fbeceb;
  --aviso-fundo: #e8f3ef;
  --raio: 10px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #141413;
    --superficie: #1e1e1c;
    --texto: #ecebe6;
    --suave: #a19f98;
    --borda: #34332f;
    --acento: #4fb495;
    --acento-texto: #0d1a16;
    --erro: #f0857c;
    --erro-fundo: #3a1d1a;
    --aviso-fundo: #17302a;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--acento); }
.topo {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.5rem 1rem; padding: 0.75rem 16px;
  background: var(--superficie); border-bottom: 1px solid var(--borda);
}
.marca { font-weight: 700; font-size: 1.1rem; text-decoration: none; color: var(--texto); }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1rem; }
.nav a { text-decoration: none; }
.sair { margin: 0; }
.conteudo { max-width: 72rem; margin: 0 auto; padding: 1.25rem 16px 3rem; }
h1 { font-size: 1.5rem; margin: 0 0 1rem; }
h2 { font-size: 1.05rem; margin: 0 0 0.5rem; }
.grade { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.cartao {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 1rem 1.25rem;
}
.estreito { max-width: 26rem; margin: 2rem auto; }
.formulario { display: grid; gap: 0.9rem; }
label { display: grid; gap: 0.3rem; font-size: 0.95rem; }
input, select, textarea {
  font: inherit; padding: 0.6rem 0.7rem; border-radius: 8px;
  border: 1px solid var(--borda); background: var(--fundo); color: var(--texto);
  width: 100%;
}
button {
  font: inherit; padding: 0.65rem 1rem; border: 0; border-radius: 8px; cursor: pointer;
  background: var(--acento); color: var(--acento-texto); font-weight: 600;
}
button.link {
  background: none; color: var(--acento); padding: 0; font-weight: 400;
}
.erro { background: var(--erro-fundo); color: var(--erro); padding: 0.6rem 0.8rem; border-radius: 8px; }
.aviso { background: var(--aviso-fundo); padding: 0.6rem 0.8rem; border-radius: 8px; }
.vazio, .nota { color: var(--suave); }
.nota { font-size: 0.9rem; }

/* Fase 2: cadastros e lançamentos */
:root { --saida: #a3271f; --entrada: #1f6f5c; --transferencia: #6b6a65; }
@media (prefers-color-scheme: dark) {
  :root { --saida: #f0857c; --entrada: #4fb495; --transferencia: #a19f98; }
}
.abas { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: 0 0 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--borda); }
.abas a { text-decoration: none; padding: 0.2rem 0; }
.abas a[aria-current="page"] { font-weight: 700; color: var(--texto); border-bottom: 2px solid var(--acento); }
.duas-colunas { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 52rem) { .duas-colunas { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.itens { list-style: none; margin: 0; padding: 0; }
.item {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 0.6rem 0; border-bottom: 1px solid var(--borda);
}
.item > div { display: grid; min-width: 0; }
.item .nota { overflow-wrap: anywhere; }
.inativo { opacity: 0.6; }
label.caixa { display: flex; align-items: center; gap: 0.5rem; }
label.caixa input { width: auto; }
.apagar { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; }
button.perigo { background: var(--erro-fundo); color: var(--erro); }
.botao {
  display: inline-block; padding: 0.55rem 0.9rem; border-radius: 8px; text-decoration: none;
  background: var(--acento); color: var(--acento-texto); font-weight: 600;
}
.botao.secundario { background: var(--superficie); color: var(--acento); border: 1px solid var(--borda); }
.cabeca { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.cabeca h1 { margin: 0; }
.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.filtro { margin-bottom: 1rem; }
.filtro summary { cursor: pointer; font-weight: 600; }
.grade-filtro { margin-top: 1rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.meses { display: flex; justify-content: space-between; margin: 0 0 1rem; }
.totais { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.total { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 1rem; align-items: baseline; }
.total strong { text-align: right; font-variant-numeric: tabular-nums; }
.saida { color: var(--saida); }
.entrada { color: var(--entrada); }
.transferencia { color: var(--transferencia); }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.lancamentos { width: 100%; border-collapse: collapse; background: var(--superficie); border-radius: var(--raio); }
table.lancamentos th, table.lancamentos td { padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--borda); text-align: left; vertical-align: top; }
table.lancamentos th.num, table.lancamentos td.num { text-align: right; }
table.lancamentos th { font-size: 0.85rem; color: var(--suave); font-weight: 600; }
/* No celular a tabela vira uma lista de cartões. */
@media (max-width: 40rem) {
  table.lancamentos thead { display: none; }
  table.lancamentos, table.lancamentos tbody, table.lancamentos tr, table.lancamentos td { display: block; width: 100%; }
  table.lancamentos tr { padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--borda); display: grid; grid-template-columns: 1fr auto; gap: 0.1rem 1rem; }
  table.lancamentos td { padding: 0; border: 0; }
  table.lancamentos td[data-rotulo="Descrição"] { grid-column: 1; grid-row: 1; font-weight: 600; }
  table.lancamentos td[data-rotulo="Valor"] { grid-column: 2; grid-row: 1 / span 2; }
  table.lancamentos td[data-rotulo="Data"], table.lancamentos td[data-rotulo="Conta"], table.lancamentos td[data-rotulo="Categoria"] { grid-column: 1; font-size: 0.85rem; color: var(--suave); }
}
.lancamento { max-width: 40rem; }
.lado-a-lado { display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
fieldset.rateio { display: grid; gap: 0.5rem; margin: 0; }
fieldset.rateio legend { font-weight: 600; padding: 0 0.3rem; }
.linha-rateio { display: grid; grid-template-columns: minmax(0, 1fr) 7.5rem; gap: 0.75rem; align-items: center; }
.linha-peso { grid-template-columns: minmax(0, 1fr) 5rem; display: grid; align-items: center; }
.estreito-largo { max-width: 32rem; }

/* Fase 3: importação */
.selo { display: inline-block; font-size: 0.8rem; padding: 0.05rem 0.45rem; border-radius: 999px; background: var(--aviso-fundo); color: var(--suave); }
.acoes-linha { white-space: nowrap; }
.acoes-linha form { display: inline; margin-left: 0.75rem; }
.confirmar { margin-top: 1.25rem; }
table.revisao tr.inativo td { text-decoration: line-through; text-decoration-color: var(--suave); }
table.revisao tr.inativo td.acoes-linha { text-decoration: none; }
@media (max-width: 40rem) {
  table.lancamentos td[data-rotulo="Classificação"], table.lancamentos td[data-rotulo="Ações"] { grid-column: 1 / span 2; font-size: 0.85rem; }
}
fieldset { border: 1px solid var(--borda); border-radius: var(--raio); padding: 0.75rem 1rem 1rem; min-width: 0; }
button.secundario { background: var(--superficie); color: var(--acento); border: 1px solid var(--borda); }
.converter { margin-top: 1.5rem; }
.textos { margin-top: 0.35rem; }
.textos ul { margin: 0.2rem 0; padding-left: 1.1rem; font-size: 0.9rem; }
.textos code { overflow-wrap: anywhere; }
form.em-linha { display: inline; margin-left: 0.5rem; }

/* Fase 4: compromissos e dívidas */
.bloco { margin-bottom: 1.25rem; }
.meses-previstos { display: grid; gap: 0.75rem; margin-bottom: 1.5rem; }
.meses-previstos summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; align-items: baseline; }
h3 { font-size: 0.95rem; margin: 1rem 0 0.4rem; }
ul.saldos { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.2rem; }
ul.saldos li { display: flex; justify-content: space-between; gap: 1rem; }

/* Fase 5: investimentos */
dl.numeros { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 1rem; margin: 0.5rem 0; }
dl.numeros dt { color: var(--suave); font-size: 0.9rem; }
dl.numeros dd { margin: 0; }
.bloco-topo { margin-top: 1rem; }

/* Fase 7: painel */
.destaque { font-size: 1.6rem; font-weight: 700; margin: 0.25rem 0; font-variant-numeric: tabular-nums; }
@media (min-width: 52rem) { .duas-colunas.iguais { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.selo.ruim { background: var(--erro-fundo); color: var(--erro); }
table.gastos td:first-child { position: relative; }
table.gastos tr.sub td:first-child { padding-left: 1.5rem; font-size: 0.95rem; }
.barra { display: block; width: 100%; height: 4px; margin-top: 0.3rem; }
.barra rect { fill: var(--acento); opacity: 0.8; }
@media (max-width: 40rem) {
  table.gastos td[data-rotulo]:not([data-rotulo="Descrição"]):not([data-rotulo="Valor"]) { grid-column: 1; text-align: left; font-size: 0.85rem; color: var(--suave); }
  table.gastos td[data-rotulo]:not([data-rotulo="Descrição"]):not([data-rotulo="Valor"])::before { content: attr(data-rotulo) " "; }
  table.gastos tr.sub { padding-left: 1.5rem; }
}
.grafico { margin: 0.5rem 0; }
.grafico svg { width: 100%; max-width: 34rem; height: auto; display: block; overflow: visible; }
.grafico .grade-linha { stroke: var(--borda); stroke-width: 1; }
.grafico .eixo { fill: var(--suave); font-size: 12px; font-variant-numeric: tabular-nums; }
.grafico .serie { fill: none; stroke: var(--acento); stroke-width: 2; stroke-linejoin: round; }
.grafico .marca { fill: var(--acento); stroke: var(--superficie); stroke-width: 2; }
.grafico .alvo { fill: transparent; }
.grafico .ponto:hover .marca { r: 6; }