:root {
  --cream: #f4efe4; --hdr: #faf7f0; --line: #d9d2c2; --brown: #7b5a49; --ink: #2b2b2b; --sub: #6f6a5f;
  --red: #e57373; --redtxt: #b5413f; --green: #a5d6a7; --greentxt: #3e8e41; --blue: #90caf9;
  --board: #2c2c2e; --chalk: #f2f0ea; --blue-link: #3a5f94;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* Fundo = cor da barra de abas: no iPhone, a faixa que o iOS reserva sob a barra fica igual a ela. */
@media (min-width: 431px) { html, body { background: var(--board) !important; } }
html, body { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; background: var(--hdr); font-family: -apple-system, "SF Pro Text", system-ui, sans-serif; color: var(--ink); }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select { font: inherit; color: inherit; }
/* position: fixed prende o app à tela; evita a faixa escura que o iOS deixa depois do teclado fechar */
#app { max-width: 430px; margin: 0 auto; position: fixed; top: 0; bottom: 0; left: 0; right: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--cream); }
.screen { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; position: relative; display: flex; flex-direction: column; }

/* barra de cima */
.nav { display: flex; align-items: center; justify-content: space-between; padding: calc(env(safe-area-inset-top) + 10px) 14px 8px; background: var(--hdr); min-height: 52px; }
.nav .side { min-width: 56px; font-size: 17px; color: var(--blue-link); }
.nav .side.r { text-align: right; }
.nav h1 { margin: 0; font-size: 17px; font-weight: 600; }
.pill { border: 1px solid #8a8478; background: #e7e2d6; border-radius: 9px; padding: 4px 28px; font-size: 17px; font-weight: 600; color: #4a463e; box-shadow: inset 0 -1px 0 rgba(0,0,0,.05); }
.help { width: 26px; height: 26px; border: 1.5px solid #8a8478; border-radius: 50%; font-size: 15px; color: #6b665b; display: inline-grid; place-items: center; }
.plus { font-size: 30px; line-height: 1; color: var(--blue-link); }

/* tela Spending (quadro-negro) */
.board { background: #2e2e30 radial-gradient(ellipse at 30% 10%, #3a3a3c 0%, #2b2b2d 60%, #252527 100%); color: var(--chalk); }
.board .nav { background: transparent; padding-bottom: 6px; }
.board .arrows { display: flex; justify-content: center; gap: 36px; font-size: 26px; padding: 4px 0 6px; color: #fff; }
.board .arrows button { color: #fff; padding: 0 16px; font-size: 28px; line-height: 1; }
.bar { height: 7px; margin: 4px 16px 18px; border-radius: 4px; background: #5a4a4a; overflow: hidden; }
.bar i { display: block; height: 100%; background: linear-gradient(#f08a8a, #d96666); border-radius: 4px; }
.sum { padding: 0 24px; }
.sum .row { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; font-size: 19px; }
.sum .row.cat { padding: 5px 0 5px 18px; font-size: 16px; }
.sum .inc { color: #a5d6a7; } .sum .exp { color: #f08d8d; } .sum .bal { color: var(--blue); }
.sum hr { border: 0; border-top: 2px dotted #bdb9ae; margin: 14px 0 10px; opacity: .8; }
.sum .row.balance { font-size: 21px; }
.sum .row.exp { font-size: 21px; }
.cta { display: flex; justify-content: center; gap: 22px; margin: auto 0 0; padding: 24px 0 18px; }
.cta button { border: 1.5px solid #e8e4d8; border-radius: 6px; padding: 10px 18px; font-size: 18px; color: #f4f1e8; min-width: 112px; }
.board .empty { text-align: center; color: #bdb9ae; padding: 30px 0; font-size: 16px; }

/* listas */
.toolbar { display: flex; justify-content: space-between; align-items: center; padding: 8px 14px; background: var(--hdr); border-top: 1px solid var(--line); font-size: 17px; color: var(--blue-link); }
.toolbar .arr { color: #6b665b; font-size: 26px; display: flex; gap: 30px; }
.toolbar .arr button { padding: 0 8px; line-height: 1; }
.totals { display: flex; font-size: 14px; text-align: center; }
.totals div { flex: 1; padding: 5px 0; }
.totals .g { background: #d8ecd5; color: #3d6f40; } .totals .r { background: #f0d9d9; color: #a34545; }
.list { background: var(--hdr); }
.item { display: flex; align-items: center; gap: 12px; padding: 7px 14px; border-bottom: 1px solid #e4ddcd; min-height: 54px; width: 100%; text-align: left; }
.ico { width: 30px; text-align: center; font-size: 22px; filter: grayscale(1) contrast(1.4) brightness(.55); flex: none; }
.item .mid { flex: 1; min-width: 0; }
.item .t { font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item .s { font-size: 13px; color: #5b564c; display: flex; gap: 4px 6px; align-items: center; flex-wrap: wrap; }
.item .amt { font-size: 17px; font-variant-numeric: tabular-nums; }
.item .amt.exp { color: var(--redtxt); } .item .amt.inc { color: var(--greentxt); }
.item .chev { color: #b8b2a3; font-size: 22px; margin-left: -4px; }
.item .del { color: #c33; font-size: 22px; width: 28px; }
.tag { font-size: 11px; background: #e9d9b0; color: #7a5a14; border-radius: 6px; padding: 1px 6px; }
.tag.ser { background: #dfe6f1; color: #3a5f94; }
.empty { text-align: center; color: #8a8478; padding: 40px 20px; font-size: 16px; }
.sectionhdr { background: #dcd3c2; color: #5b564c; font-size: 13px; padding: 7px 14px; display: flex; gap: 8px; align-items: center; border-top: 1px solid #cfc6b4; border-bottom: 1px solid #cfc6b4; }
.sectionhdr .help { width: 18px; height: 18px; font-size: 11px; border-width: 1px; }

/* segmentado */
.segwrap { background: #ddd3c1; padding: 12px 18px; }
.seg { display: flex; border: 1.5px solid #6e4f40; border-radius: 8px; overflow: hidden; }
.seg button { flex: 1; padding: 7px 0; font-size: 16px; color: #6e4f40; background: #efe9db; }
.seg button.on { background: var(--brown); color: #fff; }

.seg.inline { flex: 1; margin: 6px 0; }
.seg.inline button { padding: 6px 0; font-size: 15px; }
/* formulário */
.field { display: flex; align-items: center; background: var(--hdr); border-bottom: 1px solid #e4ddcd; min-height: 46px; padding: 0 14px; gap: 10px; width: 100%; text-align: left; }
.field label { width: 78px; font-size: 14px; color: #4a5a78; flex: none; }
.field input[type=text], .field input[type=date], .field input[type=number], .field input[type=password], .field input[type=url], .field input:not([type]) { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 18px; padding: 10px 0; outline: none; }
.field .val { flex: 1; font-size: 18px; } .field .val.ph { color: #b2ac9e; }
.field .chev { color: #b8b2a3; font-size: 22px; }
.switch { appearance: none; width: 51px; height: 31px; border-radius: 16px; background: #e0dccf; position: relative; border: 0; transition: .2s; flex: none; }
.switch::after { content: ""; position: absolute; left: 2px; top: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: .2s; }
.switch:checked { background: #34c759; } .switch:checked::after { left: 22px; }
.note { font-size: 13px; color: #6b665b; padding: 8px 14px 12px; background: var(--hdr); border-bottom: 1px solid #e4ddcd; }
.btnrow { padding: 16px 14px; display: flex; flex-direction: column; gap: 10px; }
.btn { background: var(--hdr); border: 1px solid #d3cbb9; border-radius: 10px; padding: 12px; font-size: 17px; color: var(--blue-link); text-align: center; }
.btn.danger { color: #c0392b; }

/* abas */
.tabbar { display: flex; background: var(--hdr); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
.tabbar button { flex: 1; padding: 7px 0 5px; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10px; color: #9a9588; position: relative; }
.tabbar button .g { font-size: 22px; filter: grayscale(1) opacity(.55); line-height: 1.15; }
.tabbar button.on { color: #5b4034; font-weight: 600; } .tabbar button.on .g { filter: grayscale(1) brightness(.35); }
.badge { position: absolute; top: 3px; left: calc(50% + 6px); background: #e0533d; color: #fff; border-radius: 9px; font-size: 10px; min-width: 16px; padding: 1px 4px; text-align: center; }

/* modal */
.overlay { position: absolute; inset: 0; background: rgba(0,0,0,.35); z-index: 20; display: flex; flex-direction: column; justify-content: flex-end; }
.overlay.center { justify-content: center; align-items: center; background: rgba(0,0,0,.45); }
.alert { width: 82%; max-width: 330px; background: rgba(247,244,238,.98); border-radius: 16px; overflow: hidden; text-align: center; box-shadow: 0 8px 40px rgba(0,0,0,.35); }
.alert h3 { margin: 0; padding: 18px 16px 4px; font-size: 18px; }
.alert p { margin: 0; padding: 4px 16px 16px; font-size: 15px; line-height: 1.35; color: #2b2b2b; }
.alert button { display: block; width: 100%; padding: 14px 8px; font-size: 18px; color: #7b4a37; border-top: 1px solid #d8d1c2; }
.alert button.cancel { color: #3a5f94; }
.sheet { background: var(--cream); border-radius: 14px 14px 0 0; max-height: 92%; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 -6px 30px rgba(0,0,0,.35); }
.sheet .nav { padding-top: 12px; border-bottom: 1px solid var(--line); }
.sheet .body { overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: calc(env(safe-area-inset-bottom) + 16px); }
.sheet.pick { height: 80%; }
.preview { font-size: 14px; color: #3d6f40; background: #eaf3e6; padding: 9px 14px; border-bottom: 1px solid #d6e6d1; }
.preview.bad { color: #a34545; background: #f6e3e3; }

#updatebar { position: absolute; left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom) + 64px); z-index: 45; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: rgba(30,30,30,.95); color: #fff; padding: 10px 12px 10px 16px; border-radius: 14px; font-size: 15px; box-shadow: 0 4px 20px rgba(0,0,0,.35); }
#updatebar button { background: #e8d8b0; color: #5b4034; font-weight: 600; padding: 7px 16px; border-radius: 10px; font-size: 15px; }
#toast { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 84px); transform: translateX(-50%) translateY(20px); background: rgba(30,30,30,.92); color: #fff; padding: 9px 16px; border-radius: 18px; font-size: 14px; opacity: 0; pointer-events: none; transition: .25s; z-index: 50; max-width: 86%; text-align: center; }
#toast.show { opacity: 1; transform: translateX(-50%); }

.filterbar { background: var(--hdr); padding: 6px 14px 8px; border-top: 1px solid var(--line); }
.filterbar select { width: 100%; font-size: 17px; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--line); background: #f3efe6; color: #3b362c; appearance: none; -webkit-appearance: none; text-align: center; text-align-last: center; }