/* Layout: app de uma coluna, cabeçalho com seletor de mês, navegação inferior e folha de lançamento.
   Tokens: claro "areia" é o padrão; escuro pelo sistema ou data-theme. --ink é o bloco de destaque (saldo). */
:root {
  --bg: #efebe3; --panel: #ffffff; --panel2: #f3efe7; --line: #e2dcd0;
  --fg: #1a1917; --muted: #6b665c; --accent: var(--acc-l); --on-accent: #ffffff;
  --ink: #1a1917; --on-ink: #f6f3ec; --ok-ink: #c9f25a; --bad-ink: #ff9585;
  --ok: #2f6f1e; --warn: #a85a0c; --bad: #c2392b;
  --shadow: 0 14px 34px rgba(70,55,30,.16); --card-shadow: 0 1px 2px rgba(70,55,30,.06), 0 10px 26px rgba(70,55,30,.07); --card-line: transparent;
  --k0: #2f5bea; --k1: #d9730d; --k2: #12805c; --k3: #7c3aed; --k4: #b88400; --k5: #d2314f;
  --k6: #0a86b0; --k7: #4a8f1c; --k8: #c2552b; --k9: #5d6a7e; --k10: #8592a6;
  --sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121110; --panel: #1c1b19; --panel2: #272522; --line: #35322d;
    --fg: #f4f1ea; --muted: #a39d91; --accent: var(--acc-d); --on-accent: #1a1917;
    --ink: #f4f1ea; --on-ink: #1a1917; --ok-ink: #2f6f1e; --bad-ink: #c2392b;
    --ok: #c9f25a; --warn: #ffb057; --bad: #ff8a7a;
    --shadow: 0 14px 34px rgba(0,0,0,.55); --card-shadow: none; --card-line: var(--line);
    --k0: #8ecbff; --k1: #ffb057; --k2: #6fcf97; --k3: #9aa0ff; --k4: #c9a7ff; --k5: #ff8a8a;
    --k6: #5fd4e0; --k7: #b6e36a; --k8: #ffa58a; --k9: #a0a0a6; --k10: #b9b9c0;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
    --bg: #121110; --panel: #1c1b19; --panel2: #272522; --line: #35322d;
    --fg: #f4f1ea; --muted: #a39d91; --accent: var(--acc-d); --on-accent: #1a1917;
    --ink: #f4f1ea; --on-ink: #1a1917; --ok-ink: #2f6f1e; --bad-ink: #c2392b;
    --ok: #c9f25a; --warn: #ffb057; --bad: #ff8a7a;
    --shadow: 0 14px 34px rgba(0,0,0,.55); --card-shadow: none; --card-line: var(--line);
    --k0: #8ecbff; --k1: #ffb057; --k2: #6fcf97; --k3: #9aa0ff; --k4: #c9a7ff; --k5: #ff8a8a;
    --k6: #5fd4e0; --k7: #b6e36a; --k8: #ffa58a; --k9: #a0a0a6; --k10: #b9b9c0;
    color-scheme: dark;
}
/* preferências da pessoa: cor de destaque (par claro/escuro) e capa do bloco de destaque; valem no <html> e nas amostras */
:root, [data-cor="laranja"] { --acc-l: #cc3d0c; --acc-d: #ff6a33; }
[data-cor="azul"] { --acc-l: #1d5fd6; --acc-d: #7fb0ff; }
[data-cor="verde"] { --acc-l: #1f7a3d; --acc-d: #7ddc8f; }
[data-cor="violeta"] { --acc-l: #6d3fd6; --acc-d: #b9a2ff; }
[data-cor="rosa"] { --acc-l: #c2255c; --acc-d: #ff85ad; }
:root, [data-capa="brasa"] { --capa: radial-gradient(95% 130% at 0% 0%, color-mix(in srgb, var(--accent) 50%, transparent), transparent 62%); }
[data-capa="aurora"] { --capa: radial-gradient(80% 120% at 0% 0%, color-mix(in srgb, var(--accent) 50%, transparent), transparent 60%), radial-gradient(70% 110% at 100% 0%, color-mix(in srgb, var(--k3) 45%, transparent), transparent 60%); }
[data-capa="poente"] { --capa: linear-gradient(115deg, color-mix(in srgb, var(--accent) 48%, transparent), transparent 68%); }
[data-capa="foco"] { --capa: radial-gradient(70% 90% at 50% -10%, color-mix(in srgb, var(--accent) 55%, transparent), transparent 70%); }
[data-capa="pontos"] { --capa: radial-gradient(color-mix(in srgb, var(--accent) 55%, transparent) 1.2px, transparent 1.7px) 0 0 / 11px 11px, radial-gradient(95% 130% at 0% 0%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 62%); }
[data-capa="liso"] { --capa: none; }
* { box-sizing: border-box; }
html, body { background: var(--bg); }
body { color: var(--fg); font-family: var(--sans); font-size: 15px; line-height: 1.45; margin: 0;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-block: 0; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); background: var(--bg); z-index: 20; }
.wrap { max-width: 880px; margin-inline: auto; min-height: 100vh; padding-bottom: 150px; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mono { font-family: var(--mono); }
.eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }

/* cabeçalho */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 15; background: var(--bg); padding: 14px 0 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { display: flex; align-items: center; gap: 8px; }
.marca { display: inline-flex; align-items: center; gap: 6px; }
.marca b { font-size: 19px; font-weight: 600; letter-spacing: -.03em; }
.logo { width: 30px; height: 30px; flex: none; } /* dois círculos que se somam; o "+" fica na interseção */
#gate .marca { align-self: center; } #gate .logo { width: 44px; height: 44px; } #gate .marca b { font-size: 26px; }
.mes { display: flex; align-items: center; gap: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.mes button { background: none; border: 0; border-radius: 999px; width: 32px; height: 32px; color: var(--muted); font-size: 16px; }
.mes button:hover { background: var(--panel2); color: var(--fg); }
.mes .lbl { min-width: 104px; text-align: center; font-weight: 500; text-transform: capitalize; padding: 0 4px; background: none; width: auto; color: var(--fg); font-size: 14px; }

main { padding-top: 18px; display: flex; flex-direction: column; gap: 16px; }
.card { background: var(--panel); border: 1px solid var(--card-line); box-shadow: var(--card-shadow); border-radius: 24px; padding: 20px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.card h2 { margin: 0; font-size: 15px; font-weight: 600; }
.card .note, .sheet .note { margin: 0; color: var(--muted); font-size: 13px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 12px; }
.kpi { background: var(--panel); border: 1px solid var(--card-line); box-shadow: var(--card-shadow); border-radius: 22px; padding: 16px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kpi .v { font-size: 22px; font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpi .s { font-size: 12px; color: var(--muted); }
/* bloco de destaque: redefine os tokens para tudo dentro dele se adaptar ao fundo --ink */
.hero { --fg: var(--on-ink); --muted: color-mix(in srgb, var(--on-ink) 68%, var(--ink)); --panel2: color-mix(in srgb, var(--on-ink) 14%, var(--ink)); --line: transparent; --ok: var(--ok-ink); --bad: var(--bad-ink);
  background: var(--capa), var(--ink); color: var(--fg); box-shadow: var(--card-shadow);
  border-radius: 30px; padding: 26px 22px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.hero .big { font-size: 52px; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hero.home { display: grid; grid-template-columns: 1fr auto; gap: 20px 28px; align-items: center; }
.hero.home > div:first-child { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; min-width: 0; }
.hello { font-size: 20px; font-weight: 500; letter-spacing: -.01em; margin-bottom: 10px; }
.gauge { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; font-size: 12px; color: var(--muted); }
.gauge b { color: var(--fg); font-weight: 500; }
@media (max-width: 700px) { .hero.home { grid-template-columns: 1fr; } .gauge { flex-direction: row; text-align: left; gap: 14px; padding-top: 16px; border-top: 1px solid color-mix(in srgb, var(--on-ink) 14%, transparent); } .gauge svg { width: 120px; height: auto; flex: none; } }
.hero-actions { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.pos { color: var(--ok); } .neg { color: var(--bad); }

.stack { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--panel2); gap: 2px; }
.stack span { display: block; min-width: 3px; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--muted); }
.legend span::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 2px; background: var(--c); margin-right: 6px; }
.legend b { color: var(--fg); font-weight: 500; font-variant-numeric: tabular-nums; }

/* listas */
.list { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); background: none; border-inline: 0; border-top: 0; width: 100%; text-align: left; }
.row:last-child { border-bottom: 0; }
.row .dot { width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 11px; font-family: var(--mono); background: color-mix(in srgb, var(--c) 18%, transparent); color: var(--c); }
.row .mid { flex: 1; min-width: 0; }
.row .t { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .s { font-size: 12px; color: var(--muted); }
.row .val { font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap; }
.row .val.in { color: var(--ok); }
.empty { padding: 22px 8px; text-align: center; color: var(--muted); font-size: 14px; display: flex; flex-direction: column; gap: 10px; align-items: center; }

.seg { display: inline-flex; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.seg button { border: 0; background: none; padding: 6px 14px; border-radius: 999px; color: var(--muted); font-size: 13px; }
.seg button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.btn { background: var(--accent); color: var(--on-accent); border: 0; border-radius: 999px; padding: 10px 18px; font-weight: 500; }
.btn.ghost { background: var(--panel2); color: var(--fg); border: 1px solid var(--line); }
.btn.danger { background: none; color: var(--bad); border: 1px solid var(--line); }
.btn.small { padding: 6px 14px; font-size: 13px; }
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.search { flex: 1; min-width: 160px; }
input, select { background: var(--panel2); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; width: 100%; min-width: 0; }
input::placeholder { color: var(--muted); }

.bars { display: flex; flex-direction: column; gap: 10px; }
.bar { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: 14px; }
.bar .track { grid-column: 1 / -1; height: 8px; background: var(--panel2); border-radius: 4px; overflow: hidden; }
.bar .track i { display: block; height: 100%; border-radius: 4px; background: var(--c); }
.bar .vv { font-variant-numeric: tabular-nums; color: var(--muted); }
.bar .vv b { color: var(--fg); font-weight: 500; }
.piewrap { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.piewrap svg { flex: none; max-width: 100%; }
.piewrap .bars { flex: 1; min-width: 220px; }
.chart { width: 100%; overflow-x: auto; }
.chart svg { display: block; }
.tablewrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
th { text-align: right; color: var(--muted); font-weight: 500; font-size: 12px; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { text-align: right; padding: 9px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
th:first-child, td:first-child { text-align: left; }
tr.sel td { background: var(--panel2); }
.prog { height: 10px; border-radius: 5px; background: var(--panel2); overflow: hidden; }
.prog i { display: block; height: 100%; background: var(--ok); border-radius: 5px; }
.pill { font-size: 11px; font-family: var(--mono); padding: 2px 8px; border-radius: 999px; background: var(--panel2); color: var(--muted); border: 1px solid var(--line); }
.pill.on { color: var(--ok); }

/* navegação */
.nav { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 18; width: min(calc(100vw - 24px), 430px); padding: 6px; background: color-mix(in srgb, var(--panel) 86%, transparent); backdrop-filter: blur(14px); border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow); }
.nav div { display: flex; align-items: center; gap: 2px; }
.nav button { flex: 1; min-width: 0; background: none; border: 0; border-radius: 999px; padding: 7px 2px; display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--muted); font-size: 10.5px; }
.nav button svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nav button[aria-current="page"] { color: var(--bg); background: var(--fg); }
.nav .plus { flex: none; width: 48px; height: 48px; margin-inline: 4px; padding: 0; justify-content: center; background: var(--accent); color: var(--on-accent); }
.nav .plus svg { width: 24px; height: 24px; stroke-width: 2; }
.nav .plus span { display: none; }

/* folha de lançamento */
.scrim { position: fixed; inset: 0; z-index: 30; background: rgba(5,8,13,.6); display: flex; align-items: flex-end; justify-content: center; }
.sheet { width: 100%; max-width: 520px; max-height: 92vh; overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 28px 28px 0 0; padding: 18px 18px calc(18px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 14px; box-shadow: var(--shadow); }
@media (min-width: 640px) { .scrim { align-items: center; } .sheet { border-radius: 28px; } }
.sheet h3 { margin: 0; font-size: 17px; font-weight: 600; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 12px; color: var(--muted); }
.f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.amount { font-size: 28px; font-weight: 500; font-variant-numeric: tabular-nums; padding: 12px; }
.actions { display: flex; gap: 10px; justify-content: space-between; flex-wrap: wrap; }
.err { color: var(--bad); font-size: 13px; min-height: 1em; margin: 0; }
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(96px + env(safe-area-inset-bottom, 0px)); z-index: 40; background: var(--fg); color: var(--bg); padding: 9px 16px; border-radius: 10px; font-size: 14px; box-shadow: var(--shadow); max-width: calc(100vw - 32px); }
.banner { background: color-mix(in srgb, var(--warn) 14%, var(--panel)); border: 1px solid color-mix(in srgb, var(--warn) 40%, var(--line)); border-radius: 12px; padding: 12px 14px; font-size: 14px; }
@media (max-width: 520px) { .kpis .kpi:last-child:nth-child(odd) { grid-column: 1 / -1; } .hero .big { font-size: 40px; } .mes .lbl { min-width: 88px; } }
@media (prefers-reduced-motion: no-preference) { .sheet { animation: up .22s ease-out; } @keyframes up { from { transform: translateY(24px); opacity: .6; } } }

/* PC: a navegação vira barra lateral */
@media (min-width: 900px) {
  body { padding-left: 252px; }
  .nav { left: 0; top: 0; bottom: 0; transform: none; width: 220px; padding: 76px 12px 12px; border: 0; border-right: 1px solid var(--line); border-radius: 0; box-shadow: none; background: var(--panel); }
  .nav div { flex-direction: column; align-items: stretch; gap: 4px; }
  .nav button { flex: none; flex-direction: row; gap: 12px; padding: 11px 16px; font-size: 14px; }
  .nav .plus { order: -1; width: auto; height: auto; margin: 0 0 14px; padding: 12px 16px; font-weight: 500; }
  .nav .plus span { display: inline; }
  .wrap { padding-bottom: 48px; }
  .toast { bottom: 40px; }
}

/* classes com display próprio não podem vencer o atributo hidden */
[hidden] { display: none !important; }

/* conta e tela de entrada */
.avatar { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel2); font-weight: 600; font-size: 14px; }
.avatar + i { display: none; }
#gate { background: var(--bg); align-items: center; padding: 16px; }
#gate .sheet { border-radius: 28px; }

/* olho da senha */
.pw { position: relative; display: flex; }
.pw input { flex: 1; min-width: 0; padding-right: 46px; }
.olho { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border: 0; border-radius: 50%; background: none; color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.olho svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.olho[aria-pressed="true"] { color: var(--fg); background: var(--panel2); }

/* caixinhas */
button.kpi { text-align: left; cursor: pointer; color: inherit; font: inherit; }
button.kpi:hover { border-color: var(--muted); }

/* configurações */
.nav .cfg { display: none; }
@media (min-width: 900px) { .nav div { height: 100%; } .nav .cfg { display: flex; margin-top: auto; } }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.sw-cor, .sw-capa { border: 2px solid transparent; outline: 1px solid var(--line); padding: 0; }
.sw-cor { width: 36px; height: 36px; border-radius: 50%; background: light-dark(var(--acc-l), var(--acc-d)); }
.sw-capa { width: 72px; height: 46px; border-radius: 12px; background: var(--capa), var(--ink); }
.sw-cor[aria-pressed="true"], .sw-capa[aria-pressed="true"] { outline: 2px solid var(--fg); border-color: var(--panel); }
.rotulo { font-size: 12px; color: var(--muted); margin: 6px 0 -4px; }
button.dot { border: 0; }
.row input.mid { background: none; border-color: transparent; padding: 6px 8px; font-weight: 500; }
.row input.mid:hover, .row input.mid:focus { background: var(--panel2); border-color: var(--line); }
.row.off input.mid { color: var(--muted); text-decoration: line-through; }

/* movimento: resposta ao toque, entrada de tela, barras e medidor. Tudo desligado para quem pede menos movimento. */
@media (prefers-reduced-motion: no-preference) {
  body, .card, .kpi, .hero, .nav, .top, .mes, input, select { transition: background-color .3s ease, border-color .3s ease, color .3s ease; }
  button { transition: transform .16s cubic-bezier(.3,.7,.4,1), background-color .2s ease, color .2s ease, border-color .2s ease, outline-color .2s ease; }
  button:active { transform: scale(.95); }
  .nav button:active { transform: scale(.9); }
  .olho:active { transform: translateY(-50%) scale(.9); }
  .nav button[aria-current="page"] svg { animation: pulo .45s cubic-bezier(.3,1.6,.5,1); }
  .nav .plus svg { transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
  .nav .plus:hover svg { transform: rotate(90deg); }
  .nav .plus:active svg { transform: rotate(180deg); }
  button.kpi { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
  button.kpi:hover { transform: translateY(-2px); }
  .row { transition: background-color .2s ease; }
  .sw-cor:hover, .sw-capa:hover { transform: scale(1.08); }
  #app.enter > * { animation: subir .45s cubic-bezier(.2,.8,.3,1) both; }
  #app.enter > :nth-child(2) { animation-delay: .05s; } #app.enter > :nth-child(3) { animation-delay: .1s; }
  #app.enter > :nth-child(4) { animation-delay: .15s; } #app.enter > :nth-child(n+5) { animation-delay: .2s; }
  #app.enter .prog i, #app.enter .track i, #app.enter .stack span { animation: crescer .7s cubic-bezier(.2,.8,.3,1) .15s both; transform-origin: left; }
  #app.enter .gauge path + path { animation: arco .9s cubic-bezier(.2,.8,.3,1) .15s both; }
  .scrim { animation: surgir .2s ease-out; }
  .toast { animation: toast .3s cubic-bezier(.3,1.4,.5,1); }
  @keyframes pulo { 0% { transform: scale(.6); } 100% { transform: none; } }
  @keyframes subir { from { opacity: 0; transform: translateY(14px); } }
  @keyframes crescer { from { transform: scaleX(0); } }
  @keyframes arco { from { stroke-dasharray: 0 100; } }
  @keyframes surgir { from { background: transparent; } }
  @keyframes toast { from { opacity: 0; transform: translateX(-50%) translateY(10px) scale(.95); } }
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; }