:root {
  color-scheme: light;
  --page: #f9f9f7;
  --surface: #fcfcfb;
  --raised: #ffffff;
  --text: #0b0b0b;
  --text-2: #52514e;
  --muted: #898781;
  --grid: #e1e0d9;
  --axis: #c3c2b7;
  --border: rgba(11, 11, 11, 0.1);
  --wash: rgba(42, 120, 214, 0.08);
  --accent: #2a78d6;
  --accent-text: #ffffff;
  --series: #2a78d6;
  --context: #c3c2b7;
  --good: #006300;
  --bad: #d03b3b;
  --in: #006300;
  --out: #b4302f;
  --warn-bg: #fff6e0;
  --warn-text: #7a5300;
  --warn: #fab219;
  --danger-wash: rgba(180, 48, 47, 0.08);
  --radius: 10px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page: #0d0d0d;
    --surface: #1a1a19;
    --raised: #222220;
    --text: #f0efec;
    --text-2: #c3c2b7;
    --muted: #898781;
    --grid: #2c2c2a;
    --axis: #383835;
    --border: rgba(255, 255, 255, 0.1);
    --wash: rgba(57, 135, 229, 0.14);
    --accent: #3987e5;
    --series: #3987e5;
    --context: #4a4a46;
    --good: #0ca30c;
    --bad: #e66767;
    --in: #0ca30c;
    --out: #e66767;
    --warn-bg: #3a2f12;
    --warn-text: #f3d48b;
    --danger-wash: rgba(230, 103, 103, 0.14);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0d0d0d;
  --surface: #1a1a19;
  --raised: #222220;
  --text: #f0efec;
  --text-2: #c3c2b7;
  --muted: #898781;
  --grid: #2c2c2a;
  --axis: #383835;
  --border: rgba(255, 255, 255, 0.1);
  --wash: rgba(57, 135, 229, 0.14);
  --accent: #3987e5;
  --series: #3987e5;
  --context: #4a4a46;
  --good: #0ca30c;
  --bad: #e66767;
  --in: #0ca30c;
  --out: #e66767;
  --warn-bg: #3a2f12;
  --warn-text: #f3d48b;
  --danger-wash: rgba(230, 103, 103, 0.14);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
button, input, select { font: inherit; color: inherit; }

/* Barra de navegação: no topo (fixa ao rolar) no computador; embaixo, como nos apps do iPhone, no celular. */
header.top {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
header.top .bar {
  max-width: 1180px;
  margin: 0 auto;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
header.top h1 { margin: 0; font-size: 18px; }
nav.navbar { display: flex; gap: 2px; }
nav.navbar a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--text-2);
  text-decoration: none;
  font-size: 14px;
  white-space: nowrap;
}
nav.navbar a:hover { background: var(--wash); color: var(--text); }
nav.navbar a[aria-current="page"] { background: var(--wash); color: var(--accent); font-weight: 600; }
nav.navbar svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
nav.navbar .short { display: none; }

@media (max-width: 760px) {
  header.top { position: static; background: none; border-bottom: none; }
  header.top .bar { padding: 14px 16px 0; }
  nav.navbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    background: var(--surface);
    border-top: 1px solid var(--border);
    z-index: 20;
  }
  nav.navbar a { flex-direction: column; gap: 3px; padding: 4px 2px; font-size: 11px; justify-content: center; }
  nav.navbar a[aria-current="page"] { background: none; }
  nav.navbar svg { width: 24px; height: 24px; }
  nav.navbar .long { display: none; }
  nav.navbar .short { display: inline; }
}

main { max-width: 1180px; margin: 0 auto; padding: 16px; }
/* Coluna nunca mais larga que a tela: um item largo (lista, tabela) encolhe ou rola por dentro. */
.view { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.view[hidden] { display: none; }
.loading { opacity: 0.55; transition: opacity 0.15s; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  min-width: 0;
}
.card h2 { margin: 0 0 12px; font-size: 15px; }
.card h2 small { font-weight: normal; color: var(--muted); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 900px) {
  .grid-2 { grid-template-columns: 1fr; }
}

/* Barra de filtros: mês com setas, filtros em pílula, busca e ações da tela. */
.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.month-stepper {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  background: var(--raised);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.month-stepper .step {
  width: 34px;
  height: 34px;
  padding: 0;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--text-2);
}
.month-stepper .step:hover:not(:disabled) { background: var(--wash); color: var(--accent); }
.month-stepper .step:disabled { opacity: 0.3; cursor: default; }
.month-stepper svg, .search-field svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.month-select, .month-text {
  min-width: 0;
  padding: 6px 4px;
  border: none;
  background: none;
  font-weight: 600;
  text-align: center;
  text-align-last: center;
  appearance: none;
  -webkit-appearance: none;
}
.month-select { cursor: pointer; }
.month-text { min-width: 150px; }
.filter-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill-select { position: relative; display: inline-flex; min-width: 0; }
.pill-select select {
  max-width: 230px;
  padding: 8px 34px 8px 14px;
  border-radius: 999px;
  background: var(--raised);
  appearance: none;
  -webkit-appearance: none;
  text-overflow: ellipsis;
  cursor: pointer;
}
.pill-select::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  color: var(--text-2);
  pointer-events: none;
}
.pill-select select:hover { border-color: var(--axis); }
.pill-select.active select { border-color: var(--accent); background: var(--wash); color: var(--accent); font-weight: 600; }
.pill-select.active::after { color: var(--accent); }
.search-field { position: relative; display: flex; align-items: center; flex: 1 1 220px; color: var(--muted); }
.search-field svg { position: absolute; left: 12px; width: 16px; height: 16px; pointer-events: none; }
.search-field input { width: 100%; padding: 8px 14px 8px 36px; border-radius: 999px; color: var(--text); }
.filter-actions { display: flex; gap: 8px; margin-left: auto; }
@media (max-width: 640px) {
  .month-stepper { width: 100%; justify-content: space-between; }
  .month-select, .month-text { flex: 1; }
  .filter-pills { width: 100%; }
  .filter-pills .pill-select { flex: 1 1 0; }
  .pill-select select { width: 100%; max-width: none; }
  .search-field { flex-basis: 100%; }
  .filter-actions { width: 100%; }
  .filter-actions > * { flex: 1; }
  /* No iPhone, campo com letra menor que 16px dá zoom ao tocar. */
  input, select { font-size: 16px; }
}
label { display: grid; gap: 4px; font-size: 13px; color: var(--text-2); }
input, select, button {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--raised);
  min-width: 0;
}
button { cursor: pointer; }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
/* Ações secundárias: pílula com fundo leve, para ficar claro que é botão. */
button.link {
  border: 1px solid transparent;
  background: var(--wash);
  color: var(--accent);
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
button.link:hover { border-color: var(--accent); }
button.link.danger { background: var(--danger-wash); color: var(--out); }
button.link.danger:hover { border-color: var(--out); }
button.danger { color: var(--out); }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button:disabled { opacity: 0.6; cursor: progress; }
form { display: grid; gap: 10px; }
.row { display: flex; gap: 8px; flex-wrap: wrap; }
.row > * { flex: 1 1 140px; }
.muted { color: var(--muted); font-size: 13px; }
.empty { padding: 24px 8px; text-align: center; color: var(--muted); }

/* Painel */
.hero { display: flex; flex-wrap: wrap; gap: 16px; }
.hero > .headline { flex: 1.6 1 320px; }
.hero > .tile { flex: 1 1 200px; }
.headline .label, .tile .label { font-size: 13px; color: var(--text-2); }
.headline .value { font-size: 48px; font-weight: 600; line-height: 1.1; margin: 4px 0 8px; letter-spacing: -0.5px; }
.tile .value { font-size: 22px; font-weight: 600; margin: 4px 0 2px; }
.delta { font-size: 14px; }
.delta.up { color: var(--bad); }
.delta.down { color: var(--good); }
.tile button { margin-top: 6px; }

.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.bars button {
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  border-radius: 8px;
  padding: 8px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
}
.bars button:hover { background: var(--wash); }
.bars button[aria-pressed="true"] { background: var(--wash); }
.bars .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bars .amount { font-variant-numeric: tabular-nums; text-align: right; }
.bars .track { grid-column: 1 / -1; height: 8px; position: relative; }
.bars .fill.near { background: var(--warn); }
.bars .fill.over { background: var(--bad); }
.bars .limit { position: absolute; top: -3px; width: 2px; height: 14px; margin-left: -1px; background: var(--text-2); border-radius: 1px; }
.bars .meta .near { color: var(--text-2); }
.bars .fill { height: 8px; background: var(--series); border-radius: 0 4px 4px 0; min-width: 2px; }
.bars.has-selection button:not([aria-pressed="true"]) .fill { background: var(--context); }
.bars .meta { grid-column: 1 / -1; font-size: 12px; color: var(--muted); }
.bars .meta .up { color: var(--bad); }
.bars .meta .down { color: var(--good); }

figure.chart { margin: 0; position: relative; }
figure.chart svg { width: 100%; height: auto; display: block; overflow: visible; }
figure.chart .gridline { stroke: var(--grid); stroke-width: 1; }
figure.chart .baseline { stroke: var(--axis); stroke-width: 1; }
figure.chart .tick { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
figure.chart .bar { fill: var(--context); }
figure.chart .bar.selected { fill: var(--series); }
figure.chart .column { cursor: pointer; outline: none; }
figure.chart .column:hover .bar, figure.chart .column:focus-visible .bar { opacity: 0.8; }
figure.chart .column:focus-visible .hit { stroke: var(--accent); stroke-width: 1; }
figure.chart .value-label { fill: var(--text); font-size: 12px; font-weight: 600; }
.tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--raised);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 13px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  white-space: nowrap;
  transform: translate(-50%, -100%);
}
.tooltip strong { display: block; font-size: 14px; }
.tooltip span { color: var(--text-2); }
details.table-view { margin-top: 8px; }
details.table-view summary { cursor: pointer; font-size: 13px; color: var(--text-2); }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--grid); vertical-align: middle; }
th { font-size: 12px; color: var(--muted); font-weight: 600; }
td.amount, th.amount { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
td.date { white-space: nowrap; color: var(--text-2); font-variant-numeric: tabular-nums; }
td.in { color: var(--in); }
td.out { color: var(--out); }
.table-wrap { overflow-x: auto; }
.tag {
  font-size: 12px;
  color: var(--text-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 8px;
  white-space: nowrap;
}
td select { padding: 4px 6px; font-size: 13px; max-width: 210px; }

/* Transações */
.totals { display: flex; gap: 24px; flex-wrap: wrap; }
.totals div span { display: block; font-size: 12px; color: var(--muted); }
.totals div strong { font-size: 18px; }
.totals-note { margin: 10px 0 0; }

.suggestion {
  position: sticky;
  bottom: 12px;
  background: var(--raised);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 12px 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
}
.suggestion p { margin: 0; flex: 1 1 320px; }
.suggestion input { width: 220px; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  background: var(--text);
  color: var(--surface);
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  z-index: 10;
}

/* Importar */
ul.plain { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
ul.plain li { display: flex; justify-content: space-between; gap: 8px; align-items: start; }
.drop {
  border: 1.5px dashed var(--axis);
  border-radius: var(--radius);
  padding: 18px;
  text-align: center;
  color: var(--muted);
  cursor: pointer;
}
.drop.over { border-color: var(--accent); color: var(--text); }
.drop strong { color: var(--text); display: block; overflow-wrap: anywhere; }
.result { margin-top: 8px; padding: 12px; border-radius: 8px; border: 1px solid var(--border); }
.result.error { border-color: var(--out); color: var(--out); }
.warning { margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: var(--warn-bg); color: var(--warn-text); font-size: 13px; }

/* Gastos fixos */
td.status { font-size: 14px; }
td.status.paid { color: var(--good); }
td.status.late { color: var(--bad); }
td.status.due { color: var(--text-2); }
.status-icon { font-weight: 700; display: inline-block; width: 1em; text-align: center; }
.row-actions { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-top: 6px; }
.history { display: flex; flex-wrap: wrap; gap: 0 10px; }
.history span { white-space: nowrap; }
label.check { display: flex; align-items: center; gap: 8px; color: var(--text); font-size: 14px; }
label.check input { width: auto; }

/* Cartões na lista de gastos fixos */
ul.card-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.card-row {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  text-align: left;
  border: 1px solid var(--border);
  background: var(--raised);
  border-radius: 8px;
  padding: 10px 12px;
}
.card-row:hover { border-color: var(--accent); }
.card-row > span:first-child { display: grid; gap: 2px; min-width: 0; }
.card-row .amount { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; display: grid; }
.card-row .amount small { font-weight: normal; font-size: 12px; }
.card-row .status { font-size: 14px; }
.card-row .status.paid { color: var(--good); }
.card-row .status.late { color: var(--bad); }
.card-row .status.due, .card-row .status.unknown, .card-row .status.missing { color: var(--text-2); }

/* Filtro de fatura nas transações */
.invoice-chip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  background: var(--wash);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 10px 14px;
}
.invoice-chip strong { font-size: 15px; }
.invoice-chip button.link { background: var(--raised); }

@media (max-width: 640px) {
  th, td { padding: 8px 4px; }
  td select { max-width: 140px; }
  td.date .year { display: none; }
  th.account, td.account { display: none; }
}

/* Login */
#login { display: none; }
body.logged-out #login { display: grid; place-items: center; min-height: 100vh; padding: 16px; }
body.logged-out header.top, body.logged-out main { display: none; }
.card.login { width: min(360px, 100%); display: grid; gap: 12px; justify-items: center; text-align: center; padding: 28px 20px; }
.card.login > img { border-radius: 14px; }
.card.login h2 { margin: 0; font-size: 20px; }
.login-actions { display: grid; gap: 10px; width: 100%; }
.login-actions form, .login-actions button { width: 100%; }
.login-actions p { margin: 0; }
.error-text { color: var(--out); font-size: 14px; margin: 0; }
.card.offer { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; border-color: var(--accent); }
.card.offer p { margin: 0; }

/* Painel: título com ação, editor de limites, valor negativo */
.card-title { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
.card-title h2 { margin: 0; min-width: 0; }
.card-title > button { flex: none; }
form.limits { margin-bottom: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--raised); }
form.limits p { margin: 0; }

/* Planejar o mês: limites de todas as categorias na mesma barra das entradas */
.plan-head { position: sticky; top: 56px; z-index: 2; display: grid; gap: 6px; padding: 10px 0; background: var(--raised); }
.plan-bar { position: relative; display: flex; height: 28px; border-radius: 6px; background: var(--grid); overflow: hidden; }
.plan-segment { flex: none; height: 100%; background: var(--series); box-shadow: inset -2px 0 0 var(--raised); cursor: pointer; transition: width 0.12s; }
.plan-bar.has-active .plan-segment { background: var(--context); }
.plan-bar.has-active .plan-segment.active { background: var(--series); }
.plan-over {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  background: repeating-linear-gradient(135deg, var(--bad) 0 4px, transparent 4px 8px);
  opacity: 0.55;
  pointer-events: none;
}
.plan-income { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--text); pointer-events: none; }
.plan-caption { font-size: 13px; color: var(--text-2); min-height: 1.45em; }
.plan-summary { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-size: 14px; }
.plan-summary .free { color: var(--good); }
.plan-summary .over { color: var(--bad); }
.plan-rows { display: grid; gap: 2px; }
.plan-row {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) minmax(140px, 2fr) 120px;
  gap: 2px 12px;
  align-items: center;
  padding: 6px 8px;
  border-radius: 8px;
}
.plan-row.active { background: var(--wash); }
.plan-row .name { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-row .hint { grid-column: 1 / -1; font-size: 12px; color: var(--muted); }
.plan-row input[type="range"] { width: 100%; padding: 0; border: none; background: none; accent-color: var(--accent); }
.plan-row input.amount { text-align: right; padding: 6px 8px; }
.plan-row input.amount.invalid { border-color: var(--bad); }
.plan-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.plan-actions .link { margin-right: auto; }
@media (max-width: 760px) {
  .plan-head { top: 0; }
}
@media (max-width: 640px) {
  .plan-row { grid-template-columns: 1fr 120px; }
  .plan-row input[type="range"] { grid-column: 1 / -1; grid-row: 2; }
}
.tile .value.negative { color: var(--bad); }


/* Formulários que abrem sob demanda (gastos fixos, entradas) */
.add-button { background: var(--accent); border-color: var(--accent); color: var(--accent-text); padding: 6px 12px; font-size: 14px; white-space: nowrap; }
.card.form-card { max-width: 720px; border-color: var(--accent); }

/* Quem está usando: foto e nome no canto da barra */
.avatar {
  display: inline-grid;
  place-items: center;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  background: var(--wash);
  color: var(--accent);
  font-weight: 600;
  line-height: 1;
}
.me-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px 12px 3px 3px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-2);
  text-decoration: none;
  font-size: 14px;
  white-space: nowrap;
}
.me-link[hidden] { display: none; }
.me-link:hover, .me-link[aria-current="page"] { border-color: var(--accent); color: var(--accent); }
.me-link .me-name { max-width: 12ch; overflow: hidden; text-overflow: ellipsis; }

/* "Quem está usando?" */
.card.chooser { width: min(440px, 100%); }
.profile-choices { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; width: 100%; }
.profile-choice { display: grid; justify-items: center; gap: 8px; min-width: 112px; padding: 14px 12px; border-radius: 12px; }
.profile-choice:hover { border-color: var(--accent); }
form.new-profile { display: flex; gap: 8px; width: 100%; }
form.new-profile input { flex: 1; }

/* Tela de perfil */
.grid-profile { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) {
  .grid-profile { grid-template-columns: 1fr; }
}
.me { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.me-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.avatar-edit { position: relative; padding: 0; border: none; background: none; border-radius: 50%; }
.avatar-badge {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid var(--surface);
  background: var(--accent);
  color: var(--accent-text);
  font-size: 14px;
}
.inline-field { display: flex; gap: 8px; }
.inline-field input { flex: 1; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px 3px 3px; border-radius: 999px; font-size: 13px; }
.chip:not(:has(.avatar)) { padding-left: 12px; }
.chip[aria-pressed="true"] { background: var(--wash); border-color: var(--accent); color: var(--accent); font-weight: 600; }
ol.activity { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 12px; }
.activity-day { margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; }
.activity-entry { display: flex; gap: 10px; align-items: start; }
.activity-entry > div { min-width: 0; overflow-wrap: anywhere; }

/* Importar, dentro de Transações */
.import-form { display: grid; gap: 10px; }
form.new-account { padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--raised); }
form.new-account p { margin: 0; }
details.imports { margin-top: 14px; }
details.imports summary { cursor: pointer; font-size: 13px; color: var(--text-2); margin-bottom: 10px; }

/* No celular, o fim da tela e o que fica preso embaixo sobem acima da barra de navegação. */
@media (max-width: 760px) {
  main { padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
  .toast { bottom: calc(84px + env(safe-area-inset-bottom)); }
  .suggestion { bottom: calc(76px + env(safe-area-inset-bottom)); }
}

/* Detalhes dos números do painel */
ul.lines { list-style: none; margin: 0; padding: 0; display: grid; }
ul.lines li + li { border-top: 1px solid var(--grid); }
.line-button, .line-static {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
  text-align: left;
}
.line-button { border: none; border-radius: 8px; background: none; }
.line-button:hover { background: var(--wash); }
.line-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.line-text strong { font-weight: 600; overflow-wrap: anywhere; }
.line-value { display: flex; align-items: center; gap: 8px; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }
.line-button .chevron { color: var(--muted); font-size: 18px; line-height: 1; }
.group-title { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.group-title h2 { margin: 0; }
.group-title strong { font-variant-numeric: tabular-nums; }
.equation { display: grid; gap: 8px; max-width: 420px; }
.equation div { display: flex; justify-content: space-between; gap: 12px; font-variant-numeric: tabular-nums; }
.equation div span { color: var(--text-2); }
.equation .total { padding-top: 8px; border-top: 1px solid var(--grid); }
.equation .total span { color: var(--text); font-weight: 600; }
.equation .negative, .headline .value.negative { color: var(--bad); }
.equation .positive { color: var(--good); }
p.note { margin: 0; }
.headline > .link { margin-top: 10px; }