/* variables.css entra por <link> no index.html — @import aqui obrigava
   o navegador a baixar em série, atrasando a primeira pintura. */

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
/* trava final: nada nunca cria rolagem horizontal na página */
html, body{ overflow-x:hidden; max-width:100%; }
svg{ max-width:100%; }
table{ width:100%; table-layout:fixed; }
td, th{ overflow-wrap:anywhere; }
body{
  font-family:var(--font); background:var(--bg); color:var(--ink);
  line-height:1.45; min-height:100dvh;
  padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 20px);
}
img{ max-width:100%; height:auto; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
input,select,textarea{
  font:inherit; color:var(--ink); background:var(--surface-2);
  border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:0.55rem 0.7rem; width:100%;
}
input:focus,select:focus,textarea:focus,button:focus-visible{
  outline:2px solid var(--brand); outline-offset:1px;
}
h1,h2,h3{ line-height:1.2; }
a{ color:var(--brand-strong); }

.topbar{
  position:sticky; top:0; z-index:40;
  height:calc(var(--top-h) + env(safe-area-inset-top, 0px));
  display:flex; align-items:center; gap:var(--sp-sm);
  padding:env(safe-area-inset-top, 0px) calc(var(--sp-md) + env(safe-area-inset-right, 0px)) 0 calc(var(--sp-md) + env(safe-area-inset-left, 0px));
  background:var(--bg);
  border-bottom:1px solid var(--border);
}
.topbar .logo{ font-weight:800; letter-spacing:0.4px; font-size:1.05rem; }
.topbar .logo em{ font-style:normal; color:var(--brand-strong); }
.topbar .stats{ margin-left:auto; display:flex; gap:var(--sp-sm); align-items:center; }
.pill{
  display:inline-flex; align-items:center; gap:0.3rem;
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:999px; padding:0.22rem 0.65rem;
  font-size:0.82rem; font-weight:700; white-space:nowrap;
}
.pill.warn{ background:var(--warning-soft); }
.pill button{ padding:0; }

.bottom-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  height:calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom:env(safe-area-inset-bottom, 0px);
  padding-left:env(safe-area-inset-left, 0px);
  padding-right:env(safe-area-inset-right, 0px);
  display:flex; background:var(--surface);
  border-top:1px solid var(--border);
  transition:transform 0.2s ease;
}
/* teclado do celular aberto → esconde a barra pra não cobrir o campo */
body.teclado-aberto .bottom-nav{ transform:translateY(110%); }
body.teclado-aberto .sos-fab{ display:none; }
.bottom-nav button{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; font-size:0.64rem; color:var(--ink-mute); font-weight:600;
  min-width:0; padding:0 1px; white-space:nowrap; overflow:hidden;
}
.bottom-nav button .ic{ font-size:1.25rem; line-height:1; }
.bottom-nav button.ativo{ color:var(--brand-strong); }
.bottom-nav button.ativo .ic{ transform:translateY(-1px); }

/* minmax(0,1fr): sem isso, item de grid nunca encolhe abaixo do conteúdo dele —
   um nome comprido ou uma barra larga empurrava a página inteira pra fora da tela
   (no Android isso vira "preciso dar zoom pra caber"). */
main{ max-width:640px; margin:0 auto; padding:var(--sp-md);
  display:grid; grid-template-columns:minmax(0,1fr); gap:var(--sp-md); }
main > *{ min-width:0; }
.card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:var(--sp-md);
  min-width:0; overflow-wrap:break-word;
}
.card h2{ font-size:0.8rem; text-transform:uppercase; letter-spacing:0.08em;
  color:var(--ink-mute); margin-bottom:var(--sp-sm); font-weight:700;
  display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap; }
/* antes era float:right — o float "vazava" do h2 e desalinhava o 1º item da lista */
.card h2 .dir{ float:none; margin-left:auto; }
.muted{ color:var(--ink-mute); font-size:0.85rem; }
.small{ font-size:0.8rem; }
.sec{ color:var(--ink-2); }
.num{ font-variant-numeric:tabular-nums; }
.linha{ display:flex; align-items:center; gap:var(--sp-sm); min-width:0; flex-wrap:wrap; }
.linha .esq{ margin-right:auto; min-width:0; overflow-wrap:anywhere; }
.linha > *{ min-width:0; }
.chip{
  display:inline-block; border:1px solid var(--border); border-radius:999px;
  padding:0.15rem 0.6rem; font-size:0.78rem; color:var(--ink-2); background:var(--surface-2);
}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:0.4rem;
  background:var(--brand); color:#0d0d0d; font-weight:800;
  border-radius:var(--radius-sm); padding:0.6rem 1rem; font-size:0.92rem;
}
.btn:active{ transform:scale(0.98); }
.btn.sec-btn{ background:var(--surface-2); color:var(--ink); border:1px solid var(--border); font-weight:700; }
.btn.perigo{ background:var(--critical-soft); color:#f3a1a1; border:1px solid rgba(208,59,59,0.4); }
.btn.mini{ padding:0.3rem 0.6rem; font-size:0.8rem; border-radius:8px; }
.btn.bloco{ width:100%; }
.progress{
  height:10px; background:var(--surface-3); border-radius:999px; overflow:hidden;
}
.progress > span{ display:block; height:100%; border-radius:999px;
  background:var(--brand); transition:width 0.4s ease; }
.progress.azul > span{ background:var(--series-1); }
.progress.verde > span{ background:var(--good); }
.progress.fina{ height:6px; }

.saudacao h1{ font-size:1.35rem; margin-bottom:2px; }
.frase{ color:var(--ink-2); font-size:0.9rem; font-style:italic; }
.agora{
  border-left:3px solid var(--brand); padding-left:0.7rem; margin-top:var(--sp-sm);
}
.hab{
  display:flex; align-items:center; gap:0.7rem; width:100%;
  padding:0.6rem 0.4rem; border-radius:var(--radius-sm); text-align:left;
  border-bottom:1px solid var(--grid);
}
.hab:last-child{ border-bottom:none; }
.hab .ic{ font-size:1.3rem; width:2rem; text-align:center; flex:none; }
.hab .nome{ flex:1; font-weight:600; font-size:0.95rem; }
.hab .sub{ display:block; font-weight:400; font-size:0.78rem; color:var(--ink-mute); }
.hab .streak{ font-size:0.8rem; color:var(--ink-2); font-weight:700; white-space:nowrap; }
.hab .check{
  width:1.7rem; height:1.7rem; border-radius:50%; flex:none;
  border:2px solid var(--baseline); display:grid; place-items:center;
  font-size:0.95rem; color:transparent; transition:all 0.15s ease;
}
.hab.feito .check{ background:var(--good); border-color:var(--good); color:#fff; }
.hab.falhou{ opacity:0.75; }
.hab.falhou .check{ background:var(--critical-soft); border-color:var(--critical); color:var(--critical); }
.hab.feito .nome{ text-decoration:line-through; text-decoration-color:rgba(255,255,255,0.35); }
.deslize-btn{ font-size:0.72rem; color:var(--ink-mute); text-decoration:underline; padding:0.2rem; }
.grupo-titulo{ margin:0.6rem 0 0.1rem; font-size:0.75rem; color:var(--ink-mute);
  text-transform:uppercase; letter-spacing:0.06em; font-weight:700; }
.agua-controles{ display:flex; gap:var(--sp-sm); align-items:center; flex-wrap:wrap; }
.check-lista .item{ display:flex; gap:0.6rem; align-items:flex-start; width:100%;
  text-align:left; padding:0.45rem 0.2rem; border-bottom:1px solid var(--grid); }
.check-lista .item:last-child{ border-bottom:none; }
.check-lista .box{ width:1.25rem; height:1.25rem; border-radius:6px; flex:none; margin-top:2px;
  border:2px solid var(--baseline); display:grid; place-items:center; font-size:0.75rem; color:transparent; }
.check-lista .item.ok .box{ background:var(--good); border-color:var(--good); color:#fff; }
.escala{ display:flex; gap:0.4rem; }
.escala button{
  flex:1; padding:0.5rem 0; border-radius:var(--radius-sm); font-size:1.15rem;
  background:var(--surface-2); border:1px solid var(--border);
}
.escala button.sel{ background:var(--brand); border-color:var(--brand); }

.mini-chart{ display:flex; align-items:flex-end; gap:6px; height:88px; padding-top:14px; }
.mini-chart .col{ flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; height:100%; justify-content:flex-end; }
.mini-chart .bar{ width:100%; max-width:26px; background:var(--series-1); border-radius:4px 4px 0 0; min-height:2px; position:relative; }
.mini-chart .bar.apagada{ background:var(--surface-3); }
.mini-chart .col .lbl{ font-size:0.66rem; color:var(--ink-mute); }
.mini-chart .col .val{ font-size:0.66rem; color:var(--ink-2); font-variant-numeric:tabular-nums; height:0.9em; }

.dias-nav{ display:flex; gap:6px; overflow-x:auto; padding-bottom:4px;
  min-width:0; max-width:100%; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.dias-nav::-webkit-scrollbar{ display:none; }
.dias-nav button{
  flex:1 0 auto; min-width:2.9rem; padding:0.45rem 0.2rem; border-radius:var(--radius-sm);
  background:var(--surface-2); border:1px solid var(--border);
  font-size:0.8rem; font-weight:700; color:var(--ink-2);
}
.dias-nav button.sel{ background:var(--brand); color:#0d0d0d; border-color:var(--brand); }
.bloco{
  display:flex; gap:0.7rem; padding:0.5rem 0.3rem; border-bottom:1px solid var(--grid);
  align-items:baseline;
}
.bloco:last-child{ border-bottom:none; }
.bloco .hora{ font-variant-numeric:tabular-nums; font-size:0.8rem; color:var(--ink-mute);
  width:5.4rem; flex:none; }
.bloco .txt{ flex:1; font-size:0.92rem; }
.bloco .tag{ width:4px; align-self:stretch; border-radius:2px; flex:none; }
.bloco.agora-marca{ background:var(--surface-2); border-radius:var(--radius-sm); }
.bloco .edit{ color:var(--ink-mute); font-size:0.85rem; padding:0 0.3rem; }

.refeicao-card{ border-bottom:1px solid var(--grid); padding:0.7rem 0; }
.refeicao-card:last-child{ border-bottom:none; }
.refeicao-card ul{ margin:0.3rem 0 0 1.1rem; font-size:0.88rem; color:var(--ink-2); }
.refeicao-card .subs{ margin-top:0.35rem; }
.refeicao-card .subs li{ color:var(--ink-mute); font-size:0.8rem; }
details summary{ cursor:pointer; color:var(--ink-mute); font-size:0.8rem; margin-top:0.3rem; }
.peso-chart{ width:100%; height:120px; }

.divida{ padding:0.6rem 0; border-bottom:1px solid var(--grid); }
.divida:last-child{ border-bottom:none; }
.divida .topo{ display:flex; align-items:baseline; gap:0.5rem; margin-bottom:0.35rem; }
.divida .topo .nome{ font-weight:700; }
.divida .topo .valores{ margin-left:auto; font-size:0.82rem; color:var(--ink-2); }
.divida.quitada .nome{ text-decoration:line-through; color:var(--ink-mute); }
.tabela{ width:100%; border-collapse:collapse; font-size:0.85rem; }
.tabela th{ text-align:left; color:var(--ink-mute); font-weight:600; font-size:0.75rem;
  text-transform:uppercase; letter-spacing:0.05em; padding:0.35rem 0.4rem;
  border-bottom:1px solid var(--baseline); }
.tabela td{ padding:0.4rem; border-bottom:1px solid var(--grid); vertical-align:top; }
.tabela td.num, .tabela th.num{ text-align:right; }
.gauge-lbl{ display:flex; justify-content:space-between; font-size:0.8rem; color:var(--ink-2); margin-bottom:4px; }

.sono-form{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-sm); }
.sono-form label{ font-size:0.75rem; color:var(--ink-mute); display:block; margin-bottom:2px; }
.linha-chart{ display:flex; align-items:flex-end; gap:3px; height:64px; }
.linha-chart .b{ flex:1; background:var(--series-1); border-radius:3px 3px 0 0; min-height:2px; }
.linha-chart .b.vazio{ background:var(--surface-3); }
.conquista{ display:flex; gap:0.7rem; align-items:center; padding:0.45rem 0; border-bottom:1px solid var(--grid); }
.conquista:last-child{ border-bottom:none; }
.conquista .ic{ font-size:1.5rem; width:2.2rem; text-align:center; filter:grayscale(1); opacity:0.4; }
.conquista.ganha .ic{ filter:none; opacity:1; }
.conquista .nome{ font-weight:700; font-size:0.9rem; }
.conquista .desc{ font-size:0.78rem; color:var(--ink-mute); }

.cfg-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-sm); }
.cfg-grid label, .campo label{ font-size:0.75rem; color:var(--ink-mute); display:block; margin-bottom:2px; }
.campo{ margin-bottom:var(--sp-sm); }
.lista-edit .item-edit{ display:flex; gap:0.5rem; align-items:center; padding:0.4rem 0;
  border-bottom:1px solid var(--grid); font-size:0.9rem; }
.lista-edit .item-edit:last-child{ border-bottom:none; }
.lista-edit .item-edit .nome{ flex:1; }

.modal-fundo{
  position:fixed; inset:0; z-index:60; background:rgba(0,0,0,0.65);
  display:grid; place-items:end center; backdrop-filter:blur(3px);
}
.modal{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius) var(--radius) 0 0; width:100%; max-width:640px;
  max-height:88dvh; overflow-y:auto;
  /* --kb = altura do teclado do celular (js/script.js). Sem isso o botão de salvar
     ficava embaixo do teclado no Android e a pessoa desistia de registrar. */
  padding:var(--sp-lg) var(--sp-md) calc(var(--sp-lg) + env(safe-area-inset-bottom,0px) + var(--kb, 0px));
  box-shadow:var(--shadow);
}
.modal h3{ margin-bottom:var(--sp-sm); }
.modal .acoes{ display:flex; gap:var(--sp-sm); margin-top:var(--sp-md); }
.modal .acoes .btn{ flex:1; }
.sos-fab{
  position:fixed; right:14px; bottom:calc(var(--nav-h) + env(safe-area-inset-bottom,0px) + 14px);
  z-index:45; width:52px; height:52px; border-radius:50%;
  background:var(--surface-2); border:1px solid var(--border);
  font-size:1.5rem; box-shadow:var(--shadow); display:grid; place-items:center;
}
.respira{
  width:150px; height:150px; margin:var(--sp-lg) auto; border-radius:50%;
  background:radial-gradient(circle, rgba(144,133,233,0.5), rgba(144,133,233,0.12));
  display:grid; place-items:center; font-weight:800; font-size:1.05rem;
  transition:transform 3.5s ease-in-out; transform:scale(0.62);
}
.respira.inspira{ transform:scale(1); }
.toast{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(var(--nav-h) + 20px); z-index:70;
  background:var(--surface-2); border:1px solid var(--border); color:var(--ink);
  border-radius:999px; padding:0.55rem 1.1rem; font-size:0.88rem; font-weight:600;
  box-shadow:var(--shadow); max-width:92vw; text-align:center;
}

.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-sm); }
.mt{ margin-top:var(--sp-sm); } .mt-lg{ margin-top:var(--sp-md); }
.centro{ text-align:center; }
.escondido{ display:none !important; }
.aviso{
  background:var(--warning-soft); border:1px solid rgba(250,178,25,0.35);
  border-radius:var(--radius-sm); padding:0.6rem 0.8rem; font-size:0.82rem; color:var(--ink-2);
}
.ok-box{ background:var(--good-soft); border:1px solid rgba(12,163,12,0.35);
  border-radius:var(--radius-sm); padding:0.6rem 0.8rem; font-size:0.85rem; }
.hero-num{ font-size:2rem; font-weight:800; }
.hero-sub{ font-size:0.8rem; color:var(--ink-mute); }

.modo-login .bottom-nav, .modo-login .sos-fab, .modo-login .topbar .stats,
.modo-login .topbar [data-nav="config"]{ display:none; }
.login-wrap{ max-width:400px; margin:7dvh auto 0; padding:var(--sp-md); display:grid; gap:var(--sp-md); }
.login-logo{ text-align:center; font-size:1.9rem; font-weight:800; letter-spacing:0.4px; }
.login-logo em{ font-style:normal; color:var(--brand-strong); }
.login-tag{ text-align:center; color:var(--ink-mute); font-size:0.88rem; margin-top:-0.8rem; }
.login-consent{ display:flex; gap:0.5rem; align-items:flex-start; font-size:0.8rem;
  color:var(--ink-2); margin-top:var(--sp-sm); }
.login-consent input{ width:auto; margin-top:2px; flex:none; }
.login-links{ display:flex; justify-content:space-between; font-size:0.85rem; }
.login-links button{ color:var(--brand-strong); text-decoration:underline; padding:0.2rem; }

/* telas bem estreitas (iPhone SE/mini e afins): tudo respira melhor */
@media (max-width:359px){
  .bottom-nav button{ font-size:0.56rem; }
  .bottom-nav button .ic{ font-size:1.1rem; }
  .pill{ padding:0.18rem 0.45rem; font-size:0.74rem; }
  .hero-num{ font-size:1.7rem; }
  main{ padding:var(--sp-sm); }
}
@media (min-width:768px){
  main{ max-width:720px; padding:var(--sp-lg); }
  .sono-form{ grid-template-columns:repeat(4,1fr); }
  .modal-fundo{ place-items:center; }
  .modal{ border-radius:var(--radius); }
}
@media (min-width:1024px){
  main{ max-width:860px; }
}

/* ---------- v38: moldura de recorde no avatar ---------- */
.avatar-anel{ position:relative; border-radius:50%; padding:3px; flex:none; display:grid; place-items:center; cursor:pointer; }
.avatar-anel img, .avatar-anel .avatar-inicial{ display:block; border-radius:50%; object-fit:cover; width:100%; height:100%; }
.avatar-anel .avatar-inicial{ background:var(--surface-3); display:grid; place-items:center; font-weight:800; font-size:1.3rem; color:var(--ink-2); }
.av-52{ width:58px; height:58px; } .av-64{ width:70px; height:70px; }
.anel-semente{ background:conic-gradient(from 200deg, #2c4a3c, #199e70, #2c4a3c); }
.anel-bronze{ background:conic-gradient(from 200deg, #7a4a20, #d29a5c, #8a5a2b, #d29a5c, #7a4a20); }
.anel-prata{ background:conic-gradient(from 200deg, #8d939c, #e6e9ee, #9aa0a8, #e6e9ee, #8d939c); }
.anel-ouro{ background:conic-gradient(from 200deg, #9a7616, #ffd867, #c49a2c, #ffd867, #9a7616); animation:anel-respira 6s ease-in-out infinite; }
.anel-ametista{ background:conic-gradient(from 200deg, #6f61e0, #c4bcff, #9085e9, #c4bcff, #6f61e0); animation:anel-respira 5s ease-in-out infinite; }
@keyframes anel-respira{ 0%,100%{ filter:brightness(1); } 50%{ filter:brightness(1.25); } }

/* ---------- v38: micro-interações ---------- */
.pop{ animation:check-pop 0.42s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes check-pop{ 0%{ transform:scale(0.6); } 55%{ transform:scale(1.25); } 100%{ transform:scale(1); } }
#view.anim{ animation:vista-entra 0.22s ease; }
@keyframes vista-entra{ from{ opacity:0.35; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.modal{ animation:modal-sobe 0.2s ease; }
@keyframes modal-sobe{ from{ opacity:0.4; transform:translateY(18px); } to{ opacity:1; transform:none; } }
.toast{ animation:toast-entra 0.18s ease; }
@keyframes toast-entra{ from{ opacity:0; transform:translateX(-50%) translateY(8px); } to{ opacity:1; transform:translateX(-50%) translateY(0); } }
@media (prefers-reduced-motion: reduce){
  .avatar-anel, #view.anim, .modal, .toast, .pop{ animation:none !important; }
}

/* ---- v41: abertura por intenção (chips do onboarding) ---- */
.chips-onb{ display:flex; flex-wrap:wrap; gap:0.4rem; margin:0.4rem 0 0.2rem; }
.chip-onb{
  border:1px solid var(--border); border-radius:999px;
  padding:0.4rem 0.7rem; font-size:0.82rem; line-height:1.15;
  background:var(--surface-2); color:var(--ink-2); text-align:left;
  /* v57: 0.62 dava contraste 4,2:1 — abaixo do mínimo. 0.75 continua lendo como
     "não escolhido" e passa no WCAG AA. */
  opacity:0.75; transition:opacity 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.chip-onb.sel{
  opacity:1; border-color:var(--brand); background:var(--surface-3); color:var(--ink);
  font-weight:700;
}
.chip-onb.sel::after{ content:' ✓'; color:var(--brand-strong); }

/* ---- v42: calendário de gastos na Grana ---- */
.cal-grana{ display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.cal-grana .cal-cab{
  text-align:center; font-size:0.62rem; font-weight:700; letter-spacing:0.04em;
  color:var(--ink-mute); padding-bottom:2px;
}
.cal-dia{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  min-height:2.5rem; padding:0.15rem 0; border-radius:var(--radius-sm);
  background:var(--surface-2); border:1px solid transparent; color:var(--ink-2);
}
.cal-dia .cal-n{ font-size:0.78rem; font-weight:700; line-height:1; }
.cal-dia .cal-tot{ font-size:0.6rem; color:var(--ink-mute); line-height:1; min-height:0.6rem; }
.cal-dia.tem{ background:var(--surface-3); }
.cal-dia.tem .cal-tot{ color:var(--ink-2); }
.cal-dia.hoje{ border-color:var(--border); }
.cal-dia.hoje .cal-n{ color:var(--brand-strong); }
.cal-dia.sel{ border-color:var(--brand); background:var(--surface-3); }
.cal-dia.sel .cal-n{ color:var(--ink); }
/* v55: 0.28 dava contraste 1,9:1 — o número do dia sumia pra quem enxerga menos */
.cal-dia.futuro{ opacity:0.65; background:transparent; }
@media (max-width:359px){
  .cal-dia{ min-height:2.2rem; }
  .cal-dia .cal-n{ font-size:0.72rem; }
}

/* ---- v43: peso borrado por padrão (privacidade em tela compartilhada) ---- */
.peso-card:not(.revelado) .hero-num,
.peso-card:not(.revelado) .peso-chart{
  filter:blur(7px); user-select:none; transition:filter 0.18s ease;
}
.peso-card .hero-num, .peso-card .peso-chart{ transition:filter 0.18s ease; }

/* ---- v43: dia neutro na barra da semana ---- */
.mini-chart .bar.neutra{
  background:repeating-linear-gradient(45deg,var(--surface-3),var(--surface-3) 3px,transparent 3px,transparent 6px);
}

/* ---- v49: esconder os valores da Grana (app aberto no ônibus, no trampo) ---- */
.grana-oculta .dinheiro{
  filter:blur(8px); user-select:none; transition:filter 0.18s ease;
}
.dinheiro{ transition:filter 0.18s ease; }

/* ---- v51: barra de baixo personalizável (folha "Mais" e escolha das abas) ---- */
.abas-mais{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0.45rem; }
.aba-op{
  display:flex; align-items:center; gap:0.5rem; min-width:0;
  border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--surface-2); color:var(--ink-2);
  padding:0.55rem 0.65rem; font-size:0.88rem; font-weight:600; text-align:left;
  transition:border-color 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}
.aba-op .ic{ font-size:1.15rem; line-height:1; flex:none; }
.aba-op span:not(.ic):not(.pos){ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.aba-op .pos{ margin-left:auto; font-size:0.72rem; color:var(--brand-strong); font-weight:800; flex:none; }
.aba-op.sel{ border-color:var(--brand); background:var(--surface-3); color:var(--ink); }
.aba-op.cheia{ opacity:0.45; }

/* ---- v51: projetos financeiros ---- */
.proj-item{ padding:0.5rem 0; border-bottom:1px solid var(--grid); }
.proj-item:last-of-type{ border-bottom:none; }
.chip-proj{
  display:inline-block; margin-left:0.3rem; padding:0.05rem 0.4rem;
  border:1px solid var(--border); border-radius:999px;
  font-size:0.68rem; color:var(--ink-mute); white-space:nowrap; vertical-align:middle;
}

/* ---- v52: teclado do celular não pode cobrir o botão de salvar ---- */
:root{ --kb:0px; }
body.teclado-aberto .modal{ max-height:none; }

/* ---- v56: entradas na Grana. Verde e vermelho aqui são informação, não elogio
   nem bronca — o texto ao lado sempre diz o que o número significa. ---- */
.num.pos{ color:var(--good); }
.num.neg{ color:var(--serious); }