/* Finanças Pessoais — layout.css
   Topbar, botões, cards, topbar da página */

/* TOPBAR */
.topbar{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:18px;gap:10px;flex-wrap:wrap}
.tb-title h2{font-size:20px;font-weight:800;letter-spacing:-.4px}
.tb-title p{font-size:12px;color:var(--g3);margin-top:2px}
.tb-actions{display:flex;gap:7px;flex-wrap:wrap}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:5px;padding:8px 15px;border-radius:var(--rs);font-size:13px;font-weight:700;border:none;transition:.15s;line-height:1;cursor:pointer;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--teal);color:#fff}.btn-primary:hover{background:var(--teal-d)}
.btn-secondary{background:var(--surf);border:1.5px solid var(--g2);color:var(--g4)}.btn-secondary:hover{background:var(--g1);color:var(--g5)}
.btn-danger{background:var(--red);color:#fff}.btn-danger:hover{background:var(--red-d)}
.btn-ghost{background:transparent;border:1.5px solid var(--g2);color:var(--g4)}.btn-ghost:hover{background:var(--g1)}
.btn-del{background:var(--red-l);color:var(--red);border:none}.btn-del:hover{filter:brightness(.92)}
.btn-icon{padding:6px;border-radius:6px;background:var(--g1);color:var(--g4)}.btn-icon:hover{background:var(--g2)}
.btn-sm{padding:5px 10px;font-size:12px;border-radius:6px}

/* CARDS */
.card{background:var(--surf);border-radius:var(--r);padding:16px 18px;box-shadow:var(--sh)}
.card-hd{font-size:11px;font-weight:800;color:var(--g3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px;display:flex;align-items:center;justify-content:space-between}
.mb12{margin-bottom:12px}
/* ── Page layout: topbar e títulos de página */
.page-topbar{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:14px;gap:10px;flex-wrap:wrap}
.page-title h2{font-size:20px;font-weight:800;letter-spacing:-.4px}
.page-title p{font-size:12px;color:var(--g3);margin-top:2px}
.page-desc{font-size:13px;color:var(--g3);margin:0 0 12px;line-height:1.6}

.page-title{flex:1;min-width:0}

/* ── Block button */
.btn-block{width:100%;padding:12px;font-size:14px;justify-content:center}
/* ── Val preview */
.val-preview-text{font-weight:800;min-height:16px;display:inline-block}