/* ============================================================
   FINANÇAS — motivo "fluxo": saldo herói + barras direcionais.
   Verde = entra · Terracota = sai · Neon = recebido/feito.
   Card (.zfn-*) + tela cheia (.zff-*).
   ============================================================ */

/* host → card neutro do tema (substitui o gradiente escuro antigo) */
.widget-special.widget-finance-host,
.widget-finance-host {
    background: var(--bg-card) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow-sm) !important;
    padding: 0 !important;
    gap: 0 !important;
}
.widget-finance-host .w-content-wrap { height: 100%; overflow: hidden !important; }
.widget-finance-host .widget-actions-bottom { display: none !important; }

/* ---------- CARD (mini-dashboard) ---------- */
.zfn-card { display: flex; flex-direction: column; gap: 15px; height: 100%; padding: 20px; box-sizing: border-box; color: var(--text); }
.zfn-head { display: flex; align-items: center; justify-content: space-between; }
.zfn-head-l { display: flex; align-items: center; gap: 11px; min-width: 0; }
.zfn-badge { width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0; background: rgba(90,148,0,.12);
    display: flex; align-items: center; justify-content: center; }
body.dark-mode .zfn-badge { background: rgba(155,219,31,.14); }
.zfn-badge i { font-size: 1.15rem; color: var(--green); }
.zfn-titles h4 { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 1.02rem; letter-spacing: -.03em; margin: 0; color: var(--text); }
.zfn-sub { font-size: .76rem; color: var(--text2); font-weight: 500; }

.zfn-saldo { font-family: 'Outfit', sans-serif; font-weight: 800; letter-spacing: -.045em; line-height: .9;
    color: var(--text); display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.zfn-saldo .c { font-size: 1.15rem; color: var(--muted2); font-weight: 700; }
.zfn-saldo b { font-size: clamp(2rem, 6.5vw, 2.7rem); }
.zfn-saldo-lbl { display: flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--text2); font-weight: 500; margin-top: 6px; flex-wrap: wrap; }
.zfn-delta { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: .72rem; padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
.zfn-delta.up { color: var(--green-deep); background: rgba(90,148,0,.1); }
body.dark-mode .zfn-delta.up { background: rgba(155,219,31,.14); color: var(--green); }
.zfn-delta.down { color: var(--terra); background: var(--terra-soft); }

/* barras por dia da semana (net) */
.zfn-bars { display: flex; align-items: flex-end; gap: 6px; height: 62px; padding-top: 4px; }
.zfn-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.zfn-bar { width: 100%; max-width: 20px; border-radius: 5px; background: var(--sunk); min-height: 6px; }
.zfn-bar.up { background: linear-gradient(180deg, var(--lime), var(--green)); }
.zfn-bar.down { background: var(--terra); opacity: .85; }
.zfn-days { display: flex; gap: 6px; margin-top: 5px; }
.zfn-days span { flex: 1; text-align: center; font-family: 'JetBrains Mono', monospace; font-size: .6rem; font-weight: 600; color: var(--muted2); }
.zfn-days span.today { color: var(--green); font-weight: 800; }

.zfn-split { display: flex; gap: 10px; margin-top: auto; }
.zfn-pill { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 14px; padding: 11px 13px; background: var(--app); }
.zfn-pill.inc { background: rgba(90,148,0,.08); border-color: rgba(90,148,0,.24); }
.zfn-pill.exp { background: rgba(192,57,43,.07); border-color: rgba(192,57,43,.22); }
body.dark-mode .zfn-pill.inc { background: rgba(155,219,31,.1); border-color: rgba(155,219,31,.24); }
body.dark-mode .zfn-pill.exp { background: rgba(255,111,96,.1); border-color: rgba(255,111,96,.22); }
.zfn-pill .t { display: flex; align-items: center; gap: 7px; font-size: .74rem; font-weight: 700; color: var(--text2); }
.zfn-pill .dot { width: 9px; height: 9px; border-radius: 99px; flex-shrink: 0; }
.zfn-pill.inc .dot { background: var(--green); }
.zfn-pill.exp .dot { background: var(--terra); }
.zfn-pill .v { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1.12rem; letter-spacing: -.02em; margin-top: 3px; color: var(--text); }
.zfn-pill.inc .v { color: var(--green-deep); }
.zfn-pill.exp .v { color: var(--terra); }
body.dark-mode .zfn-pill.inc .v { color: var(--green); }
body.dark-mode .zfn-pill.exp .v { color: var(--terra); }

/* ============================================================
   TELA CHEIA
   ============================================================ */
#fsWidget[data-type="widget-finance"] .zfs-body { padding: 0; }
.zff { display: flex; flex-direction: column; max-width: 600px; margin: 0 auto; }

.zff-hero { padding: 20px 22px 22px; background: var(--card); border-bottom: 1px solid var(--line); }
.zff-monthnav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.zff-monthnav button { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line); background: var(--app);
    color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .18s; }
body.dark-mode .zff-monthnav button { background: rgba(255,255,255,.04); }
.zff-monthnav button:hover { background: var(--sunk); }
.zff-month { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: .98rem; letter-spacing: -.02em; color: var(--text); }
.zff-balance-lbl { display: flex; align-items: center; gap: 8px; font-family: 'JetBrains Mono', monospace;
    font-size: .64rem; font-weight: 700; letter-spacing: .14em; color: var(--green); margin-bottom: 6px; }
.zff-balance-lbl i { font-size: .75rem; }
.zff-balance-val { font-family: 'Outfit', sans-serif; font-weight: 800; letter-spacing: -.05em; line-height: .86;
    color: var(--text); display: flex; align-items: baseline; gap: 7px; font-size: clamp(2.3rem, 9vw, 3.6rem); white-space: nowrap; }
.zff-balance-val .c { font-size: 1.5rem; color: var(--muted2); font-weight: 700; }
.zff-delta { display: inline-flex; align-items: center; gap: 6px; font-family: 'Outfit', sans-serif; font-weight: 700;
    font-size: .76rem; padding: 4px 11px; border-radius: 99px; margin-top: 12px; }
.zff-delta.up { color: var(--green-deep); background: rgba(90,148,0,.1); }
body.dark-mode .zff-delta.up { background: rgba(155,219,31,.14); color: var(--green); }
.zff-delta.down { color: var(--terra); background: var(--terra-soft); }

.zff-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; padding: 18px 22px; }
.zff-stat { border: 1px solid var(--line); border-radius: 14px; padding: 11px 13px; background: var(--card); display: flex; flex-direction: column; gap: 6px; }
.zff-stat-top { display: flex; align-items: center; gap: 8px; font-size: .74rem; font-weight: 600; color: var(--text2); }
.zff-stat-ico { width: 22px; height: 22px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: .62rem; flex-shrink: 0; }
.zff-stat-ico.inc { background: rgba(90,148,0,.14); color: var(--green); }
.zff-stat-ico.exp { background: var(--terra-soft); color: var(--terra); }
.zff-stat-ico.rec { background: rgba(163,255,18,.18); color: var(--green-deep); }
body.dark-mode .zff-stat-ico.rec { color: #0d0d0d; background: var(--neon); }
.zff-stat-ico.pay { background: var(--sunk); color: var(--muted); }
.zff-stat-val { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1.18rem; letter-spacing: -.02em; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.zff-sec { padding: 6px 22px 18px; }
.zff-sec-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; }
.zff-mono { font-family: 'JetBrains Mono', monospace; font-size: .64rem; font-weight: 700; letter-spacing: .14em; color: var(--muted); }
.zff-sec-sub { font-family: 'Outfit', sans-serif; font-size: .76rem; font-weight: 700; color: var(--text); }
.zff-panel { border: 1px solid var(--line); border-radius: 16px; background: var(--card); padding: 15px; }
.zff-list-panel { padding: 6px 15px 8px; }

/* line chart */
.zff-chart-svg { width: 100%; height: 84px; display: block; }
.zff-chart-empty, .zff-list-empty, .zff-cats-empty { text-align: center; color: var(--text2); font-size: .86rem; padding: 22px 8px; }

/* donut + legenda */
.zff-donut-wrap { display: flex; align-items: center; gap: 16px; }
@media (max-width: 560px) { .zff-donut-wrap { flex-direction: column; align-items: stretch; } .zff-donut { margin: 0 auto; } }
.zff-donut { width: 108px; height: 108px; flex-shrink: 0; position: relative; }
.zff-donut svg { width: 100%; height: 100%; }
.zff-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 10px; box-sizing: border-box; }
.zff-donut-center small { font-size: .6rem; color: var(--text2); font-weight: 600; letter-spacing: .04em; }
.zff-donut-center strong { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1.05rem; letter-spacing: -.02em; color: var(--text);
    max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zff-legend { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.zff-leg-item { display: flex; align-items: center; gap: 8px; font-size: .78rem; min-width: 0; }
.zff-leg-dot { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
.zff-leg-name { color: var(--text); font-weight: 500; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zff-leg-val { display: none; }
.zff-leg-pct { font-family: 'Outfit', sans-serif; font-weight: 700; color: var(--text2); font-size: .74rem; min-width: 34px; text-align: right; flex-shrink: 0; }

/* lista de transações */
.zff-list { display: flex; flex-direction: column; }
.zff-day-label { font-family: 'JetBrains Mono', monospace; font-size: .6rem; font-weight: 700; letter-spacing: .1em; color: var(--muted2); margin: 14px 0 8px; }
.zff-day-label:first-child { margin-top: 0; }
.zff-item { display: flex; align-items: center; gap: 11px; padding: 9px 0; }
.zff-item-ico { width: 36px; height: 36px; border-radius: 11px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: .82rem; }
.zff-item-main { flex: 1; min-width: 0; }
.zff-item-title { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: .88rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zff-item-sub { font-size: .72rem; color: var(--text2); }
.zff-item-amt { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: .92rem; letter-spacing: -.01em; white-space: nowrap; }
.zff-item-amt.inc { color: var(--green); }
.zff-item-amt.exp { color: var(--text); }
.zff-item-del { background: none; border: none; color: var(--muted2); cursor: pointer; padding: 6px; border-radius: 8px;
    font-size: .82rem; opacity: .4; transition: opacity .18s, color .18s, background .18s; flex-shrink: 0; }
@media (hover: hover) { .zff-item-del { opacity: 0; } .zff-item:hover .zff-item-del { opacity: .55; } }
.zff-item-del:hover { opacity: 1 !important; color: var(--terra); background: var(--terra-soft); }
.zff-badge-future { font-size: .6rem; font-weight: 700; background: var(--sunk); color: var(--muted); padding: 1px 6px; border-radius: 5px; margin-left: 6px; vertical-align: middle; }

/* FAB: tinta no claro, neon no escuro */
#fsWidget[data-type="widget-finance"] .zfs-fab { background: var(--ink); color: #FAFAF7; }
body.dark-mode #fsWidget[data-type="widget-finance"] .zfs-fab { background: var(--neon); color: #0d0d0d; }

/* ============================================================
   CONTAS — faixa de saldos (topo do gestor) + modal de conta
   ============================================================ */
.zff-accounts .zff-acc-strip {
    display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 6px;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.zff-accounts .zff-acc-strip::-webkit-scrollbar { height: 0; }
.zff-acc-card {
    flex: 0 0 auto; min-width: 132px; scroll-snap-align: start;
    display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
    background: var(--card); border: 1px solid var(--line); border-radius: 16px;
    padding: 12px 14px; cursor: pointer; text-align: left;
    transition: border-color .18s, transform .12s;
}
.zff-acc-card:active { transform: scale(.97); }
.zff-acc-card:hover { border-color: var(--green); }
.zff-acc-card.off { opacity: .55; }
.zff-acc-ico {
    width: 34px; height: 34px; border-radius: 10px; display: flex;
    align-items: center; justify-content: center; font-size: .95rem;
}
.zff-acc-ico.add { background: var(--sunk); color: var(--muted); }
.zff-acc-name {
    font-family: 'Outfit', sans-serif; font-weight: 600; font-size: .82rem; color: var(--text);
    max-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.zff-acc-bal { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: .95rem; letter-spacing: -.01em; }
.zff-acc-bal.pos { color: var(--text); }
.zff-acc-bal.neg { color: var(--terra); }
.zff-acc-add { justify-content: center; align-items: center; border-style: dashed; }
.zff-acc-add .zff-acc-name { color: var(--muted); }

/* modal de criar/editar conta (anexado ao body) — usa tokens globais */
.acc-icon-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.acc-icon-opt {
    aspect-ratio: 1 / 1; border: 1.5px solid var(--border-color); border-radius: 12px;
    background: var(--bg-app); cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: 1rem; transition: border-color .15s, transform .12s;
}
.acc-icon-opt.active { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(90, 148, 0, .14); }
.acc-icon-opt:active { transform: scale(.92); }
.acc-color-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.acc-color-opt {
    width: 30px; height: 30px; border-radius: 50%; border: none; cursor: pointer;
    transition: box-shadow .15s, transform .12s;
}
.acc-color-opt.active { box-shadow: 0 0 0 2px var(--bg-base), 0 0 0 4px var(--text-main); transform: scale(1.08); }
.acc-toggle { display: flex; align-items: center; gap: 10px; font-size: .9rem; color: var(--text-main); font-weight: 600; cursor: pointer; margin-top: 4px; }
.acc-toggle input { width: 18px; height: 18px; accent-color: var(--primary); }
.btn-acc-delete {
    width: 100%; margin-top: 10px; padding: 12px; border-radius: 12px;
    border: 1px solid rgba(239, 68, 68, .3); background: rgba(239, 68, 68, .08); color: #ef4444;
    font-weight: 700; font-family: 'Outfit', sans-serif; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: transform .12s;
}
.btn-acc-delete:active { transform: scale(.98); }

/* ============================================================
   v7 "QUIET PREMIUM" — escala e pesos contidos
   ============================================================ */
.zfn-saldo { font-weight: 700; letter-spacing: -.03em; }
.zff-balance-val { font-weight: 700; letter-spacing: -.03em; }
.zff-stat-val { font-weight: 700; font-size: 1.1rem; }
.zff-item-amt { font-weight: 700; }
.zfn-pill .v { font-weight: 700; font-size: 1.05rem; }
.zff-donut-center strong { font-weight: 700; }
.zff-mono, .zff-day-label, .zff-balance-lbl, .zfn-days span {
    font-family: 'Inter', sans-serif; font-weight: 600;
    letter-spacing: .09em; text-transform: uppercase; color: var(--text-muted);
}
.zfn-days span.today { color: var(--primary); font-weight: 700; }

/* ============================================================
   ZSEL — seletor custom do modal de transação (substitui o
   <select> nativo). Trigger dentro do campo + popover (desktop)
   ou bottom-sheet (mobile). Acompanha tokens globais (dark-mode).
   ============================================================ */
.ztx-field-select { cursor: pointer; }
.zsel-native { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.zsel-trigger {
    flex: 1; min-width: 0; display: flex; align-items: center;
    background: transparent; border: none; outline: none; cursor: pointer;
    font-family: 'Outfit', sans-serif; font-size: .95rem; color: var(--text-main);
    padding: 13px 24px 13px 0; text-align: left;
}
.zsel-trigger-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ztx-field-select.zsel-active { border-color: var(--primary); background: rgba(120, 120, 128, .15); }
.ztx-field-select .ztx-field-caret { transition: transform .22s ease; }
.ztx-field-select.zsel-active .ztx-field-caret { transform: rotate(180deg); color: var(--primary); }

/* popover ancorado (desktop) */
.zsel-pop {
    position: fixed; z-index: 100099; min-width: 220px;
    background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 16px;
    box-shadow: 0 22px 54px -18px rgba(15, 23, 42, .38), 0 6px 16px -8px rgba(15, 23, 42, .2);
    padding: 6px; max-height: 320px; overflow-y: auto;
    opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top center;
    transition: opacity .16s ease, transform .16s ease;
    scrollbar-width: thin;
}
body.dark-mode .zsel-pop { box-shadow: 0 24px 60px -16px rgba(0, 0, 0, .7); }
.zsel-pop.in { opacity: 1; transform: translateY(0) scale(1); }
.zsel-pop-list { display: flex; flex-direction: column; gap: 2px; }
.zsel-opt {
    display: flex; align-items: center; gap: 11px; width: 100%;
    padding: 9px 11px; border: none; background: transparent; border-radius: 11px;
    cursor: pointer; text-align: left; color: var(--text-main);
    font-family: 'Outfit', sans-serif; font-size: .92rem; font-weight: 500;
    transition: background .12s ease;
}
.zsel-opt:hover { background: rgba(120, 120, 128, .12); }
.zsel-opt.sel { background: rgba(90, 148, 0, .1); font-weight: 700; }
body.dark-mode .zsel-opt.sel { background: rgba(155, 219, 31, .13); }
.zsel-opt-ico {
    flex-shrink: 0; width: 32px; height: 32px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center; font-size: .82rem;
    background: rgba(120, 120, 128, .1); color: var(--text-sec);
}
.zsel-opt-ico.plain { background: rgba(120, 120, 128, .12); color: var(--text-sec); }
.zsel-opt-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zsel-opt-check { color: var(--primary); font-size: .8rem; flex-shrink: 0; }
.zsel-opt.isnew { color: var(--text-sec); font-weight: 600; }
.zsel-opt.isnew .zsel-opt-ico { border: 1px dashed var(--border-color); background: transparent; }

/* bottom-sheet (mobile) */
.zsel-backdrop {
    position: fixed; inset: 0; z-index: 100098; background: rgba(15, 23, 42, .45);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    opacity: 0; transition: opacity .2s ease;
}
.zsel-backdrop.in { opacity: 1; }
.zsel-pop.sheet {
    left: 0 !important; right: 0; top: auto !important; bottom: 0; width: 100% !important;
    min-width: 0; max-height: 72vh; border-radius: 26px 26px 0 0;
    padding: 6px 12px calc(16px + env(safe-area-inset-bottom));
    transform: translateY(100%); transform-origin: bottom center;
    box-shadow: 0 -18px 44px -14px rgba(15, 23, 42, .32);
}
.zsel-pop.sheet.in { transform: translateY(0); }
.zsel-pop-head {
    position: sticky; top: 0; background: var(--bg-card); z-index: 1;
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 6px 12px 8px; margin-bottom: 2px;
    font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 1.02rem; color: var(--text-main);
}
.zsel-pop-head::before {
    content: ''; position: absolute; top: -2px; left: 50%; transform: translateX(-50%);
    width: 40px; height: 4px; border-radius: 99px; background: var(--border-color);
}
.zsel-pop-x {
    flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
    background: rgba(120, 120, 128, .12); border: none; color: var(--text-sec);
    cursor: pointer; font-size: .9rem;
}
.zsel-pop.sheet .zsel-opt { padding: 13px 12px; font-size: 1rem; }
.zsel-pop.sheet .zsel-opt-ico { width: 38px; height: 38px; font-size: .92rem; }

/* ============================================================
   v8 — REFINAMENTOS DE LAYOUT (mobile + desktop)
   Ritmo de espaçamento mais consistente, tipografia e cantos.
   ============================================================ */
.zff-panel { border-radius: 18px; padding: 16px; }
.zff-stat { border-radius: 16px; padding: 12px 14px; }
.zff-stat-val { font-size: 1.16rem; }
.zff-summary { gap: 10px; padding: 16px 22px 8px; }
.zff-hero { padding: 22px 22px 24px; }

/* CONTAS: o cabeçalho pode quebrar p/ o "Saldo geral" não estourar a tela */
.zff-accounts .zff-sec-h { flex-wrap: wrap; gap: 4px 12px; }
.zff-accounts .zff-mono { flex-shrink: 0; }
.zff-sec-sub { font-variant-numeric: tabular-nums; }
.zff-sec-sub strong { color: var(--text); font-weight: 800; }

/* Mobile: respiro/toque um pouco maiores e contas que cabem melhor */
@media (max-width: 768px) {
    .zff-hero { padding: 20px 18px 22px; }
    .zff-summary { padding: 14px 18px 6px; gap: 10px; }
    .zff-sec { padding: 6px 18px 16px; }
    .zff-accounts .zff-sec-h { row-gap: 2px; }
    .zff-accounts .zff-sec-sub { flex: 0 0 100%; text-align: right; }
    .zff-acc-card { min-width: 140px; padding: 13px 15px; }
    .zff-acc-strip { gap: 11px; }
    .zff-item { padding: 11px 0; }
    .zff-item-ico { width: 40px; height: 40px; }
    .zff-item-title { font-size: .92rem; }
}

/* Desktop: hero mais equilibrado (saldo à esquerda, variação à direita) */
@media (min-width: 769px) {
    .zff-hero {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas: "nav nav" "lbl lbl" "val delta";
        column-gap: 18px; row-gap: 6px; align-items: end;
    }
    .zff-hero .zff-monthnav { grid-area: nav; margin-bottom: 12px; }
    .zff-hero .zff-balance-lbl { grid-area: lbl; }
    .zff-hero .zff-balance-val { grid-area: val; }
    .zff-hero .zff-delta { grid-area: delta; margin-top: 0; align-self: end; justify-self: end; }
    .zff-balance-val { font-size: clamp(2.4rem, 3.4vw, 3.2rem); }
    .zff-panel { padding: 18px; }
    .zff-stat-val { font-size: 1.22rem; }
    /* lista de transações: linhas com padding interno + hover discreto */
    .zff-list-panel .zff-item { padding: 10px 10px; border-radius: 12px; margin: 0 -6px; transition: background .14s ease; }
    .zff-list-panel .zff-item:hover { background: rgba(120, 120, 128, .07); }
    body.dark-mode .zff-list-panel .zff-item:hover { background: rgba(255, 255, 255, .05); }
}