:root {
  --verde: #1B7A43;
  --verde-claro: #E7F3EC;
  --azul-noite: #0F2A43;
  --amarelo: #FFC107;
  --vermelho: #E53935;
  --creme: #F7F4EE;
  --texto: #0F2A43;
  --texto-aux: #5A6B7B;
  --borda: #E4DCCF;
  --radius: 16px;
  --shadow: 0 8px 24px rgba(15,42,67,.08);
  --font: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { overflow-x: hidden; }
body { font-family: var(--font); color: var(--texto); background: var(--creme); line-height: 1.5; -webkit-font-smoothing: antialiased; }
button { font-family: inherit; cursor: pointer; }
input { font-family: inherit; }
ul { list-style: none; }
[hidden] { display: none !important; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; font-weight: 800; padding: .8rem 1.4rem; border-radius: 999px; border: 0; transition: .2s; font-size: .95rem; }
.btn--primary { background: var(--verde); color: #fff; }
.btn--primary:hover { background: #146036; }
.btn--ghost { background: #fff; color: var(--azul-noite); border: 1px solid var(--borda); }
.btn--ghost:hover { border-color: var(--verde); color: var(--verde); }
.btn--sm { padding: .5rem 1rem; font-size: .85rem; }

.field { display: block; text-align: left; margin-bottom: .9rem; }
.field span { display: block; font-size: .8rem; font-weight: 800; color: var(--texto-aux); margin-bottom: .3rem; }
.field input { width: 100%; padding: .8rem 1rem; border: 1.5px solid var(--borda); border-radius: 12px; font-size: 1rem; background: #fff; }
.field input:focus { outline: none; border-color: var(--verde); }

.erro { background: #FDECEA; color: var(--vermelho); font-size: .85rem; font-weight: 700; padding: .6rem .9rem; border-radius: 10px; margin-bottom: .9rem; }

/* Login */
#login-view { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: linear-gradient(160deg, var(--azul-noite) 0%, #16395c 100%); }
.login { background: #fff; border-radius: 24px; box-shadow: 0 24px 60px rgba(0,0,0,.3); padding: 2.2rem 1.8rem; width: min(420px, 100%); text-align: center; }
.login__logo { font-weight: 900; font-size: 1.6rem; color: var(--verde); margin-bottom: 1rem; }
.login__title { font-size: 1.4rem; font-weight: 900; color: var(--azul-noite); }
.login__sub { color: var(--texto-aux); font-size: .9rem; margin: .3rem 0 1.4rem; }
.login .btn { width: 100%; }

/* Header */
.dash-header { position: sticky; top: 0; z-index: 5; background: var(--azul-noite); color: #fff; display: flex; align-items: center; justify-content: space-between; padding: .8rem 1.2rem; }
.dash-header__brand { font-weight: 900; font-size: 1.15rem; color: var(--amarelo); }
.dash-header__user { display: flex; align-items: center; gap: .7rem; min-width: 0; }
#header-nome { font-weight: 800; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hdr-btn { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; padding: .35rem .9rem; font-size: .85rem; font-weight: 800; }
.hdr-btn:hover { background: rgba(255,255,255,.2); }
.hdr-btn--out { padding: .35rem .7rem; }

/* Layout */
.dash { width: min(1100px, 94%); margin: 0 auto; padding: 1.6rem 0 3rem; display: grid; gap: 1.2rem; }
.dash__title { font-size: 1.7rem; font-weight: 900; color: var(--azul-noite); }
.dash__sub { color: var(--texto-aux); font-size: .9rem; margin-top: -.8rem; }
.dash h2 { font-size: 1.05rem; font-weight: 900; color: var(--azul-noite); }
.painel { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.2rem; }
.painel__title { margin-bottom: .9rem; }
.painel__title--ok { color: var(--verde); }
.painel__title--bad { color: var(--vermelho); }

/* Cards */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem; }
.card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .5rem; border-top: 4px solid transparent; }
.card { min-width: 0; }
.card__rotulo { font-size: .75rem; font-weight: 800; letter-spacing: .03em; }
.card__valor { font-size: 1.45rem; font-weight: 900; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.card--ok { border-top-color: var(--verde); }
.card--ok .card__rotulo { color: var(--verde); }
.card--bad { border-top-color: var(--vermelho); }
.card--bad .card__rotulo { color: var(--vermelho); }
.card--bad .card__valor { color: var(--vermelho); }
.card--azul { border-top-color: var(--azul-noite); }
.card--azul .card__rotulo { color: var(--azul-noite); }

/* Mapa do dinheiro */
.mapa { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.2rem; }
.mapa__title { font-size: 1.05rem; font-weight: 900; color: var(--azul-noite); margin-bottom: 1rem; }
.mapa__inner { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.donut { position: relative; width: 150px; height: 150px; border-radius: 50%; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; background: var(--borda); }
.donut::before { content: ""; position: absolute; inset: 19%; background: #fff; border-radius: 50%; }
.donut span { position: relative; z-index: 1; font-weight: 900; font-size: .95rem; color: var(--azul-noite); max-width: 90px; text-align: center; }
.mapa__legend { flex: 1; min-width: 220px; display: grid; gap: .6rem; }
.leg { display: flex; align-items: center; gap: .55rem; font-size: .9rem; }
.leg i { width: 13px; height: 13px; border-radius: 4px; background: var(--c); flex: 0 0 auto; }
.leg b { margin-left: auto; font-variant-numeric: tabular-nums; }
.mapa__custo { margin-top: 1rem; background: #FDECEA; color: var(--vermelho); font-weight: 800; font-size: .85rem; border-radius: 10px; padding: .6rem .9rem; }

/* Caixa e contas */
.contas { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.2rem; }
.contas__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.contas__tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; margin-bottom: 1.1rem; }
.tile { border-radius: 12px; padding: .8rem .9rem; display: flex; flex-direction: column; gap: .35rem; }
.tile__rotulo { font-size: .72rem; font-weight: 800; letter-spacing: .03em; }
.tile { min-width: 0; }
.tile__valor { font-size: 1.15rem; font-weight: 900; color: var(--azul-noite); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tile--ok { background: var(--verde-claro); }
.tile--ok .tile__rotulo { color: var(--verde); }
.tile--azul { background: #E8EEF5; }
.tile--azul .tile__rotulo { color: var(--azul-noite); }
.tile--bad { background: #FDECEA; }
.tile--bad .tile__rotulo { color: var(--vermelho); }
.contas__sub { font-size: .8rem; font-weight: 800; color: var(--texto-aux); margin-bottom: .6rem; }
.ents { display: grid; gap: .4rem; }
.ent-item { display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem; border: 1px solid var(--borda); border-radius: 10px; font-size: .88rem; }
.ent-item__seta { font-weight: 900; }
.ent-item__seta.ok, .rank__valor.ok, .ent-item__valor.ok { color: var(--verde); }
.ent-item__seta.bad, .rank__valor.bad, .ent-item__valor.bad { color: var(--vermelho); }
.ent-item__texto { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ent-item__valor { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ent-item__del { border: 0; background: transparent; color: var(--texto-aux); font-size: .9rem; padding: .2rem .4rem; border-radius: 8px; }
.ent-item__del:hover { background: #FDECEA; color: var(--vermelho); }
.vazio { color: var(--texto-aux); font-size: .88rem; padding: .4rem 0; }

/* Rankings / perdas / decisões */
.duas { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.lista { display: grid; gap: .45rem; }
.lista li { display: flex; align-items: center; gap: .6rem; font-size: .9rem; }
.rank__nome { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank__valor { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.chips { display: flex; gap: .6rem; margin-bottom: .9rem; flex-wrap: wrap; }
.chip { font-size: .8rem; font-weight: 800; border-radius: 999px; padding: .35rem .9rem; }
.chip--ok { background: var(--verde-claro); color: var(--verde); }
.chip--bad { background: #FDECEA; color: var(--vermelho); }
.deco { display: grid; gap: .45rem; }
.deco__item { font-size: .9rem; padding: .55rem .8rem; border-radius: 10px; border: 1px solid var(--borda); }
.deco__item.ok { border-left: 4px solid var(--verde); }
.deco__item.bad { border-left: 4px solid var(--vermelho); }

/* Dialog */
dialog { border: 0; border-radius: 20px; box-shadow: 0 24px 60px rgba(0,0,0,.25); padding: 1.6rem; width: min(440px, 92vw); }
dialog::backdrop { background: rgba(15,42,67,.5); }
.dlg__title { font-size: 1.15rem; font-weight: 900; color: var(--azul-noite); margin-bottom: 1rem; }
.dlg__label { font-size: .8rem; font-weight: 800; color: var(--texto-aux); margin-bottom: .4rem; }
.seg { display: grid; grid-template-columns: repeat(2, 1fr); gap: .4rem; margin-bottom: .9rem; }
#seg-tipo { grid-template-columns: repeat(4, 1fr); }
.seg button { border: 1.5px solid var(--borda); background: #fff; border-radius: 10px; padding: .55rem .4rem; font-size: .8rem; font-weight: 800; color: var(--texto-aux); }
.seg button.on { border-color: var(--verde); background: var(--verde-claro); color: var(--verde); }
.dlg__desc { font-size: .8rem; color: var(--texto-aux); margin-bottom: .9rem; }
.dlg__acoes { display: flex; gap: .7rem; justify-content: flex-end; margin-top: .4rem; }

/* Responsivo */
@media (max-width: 860px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .contas__tiles { grid-template-columns: repeat(2, 1fr); }
  .duas { grid-template-columns: 1fr; }
  .mapa__inner { justify-content: center; }
}
@media (max-width: 480px) {
  #seg-tipo { grid-template-columns: repeat(2, 1fr); }
  .dash__title { font-size: 1.35rem; }
}