:root{
  --paper:#FAF8F3; --paper-alt:#F1EDE3; --ink:#1E2A2B; --ink-soft:#5B6664;
  --line:#D8D0BE; --forest:#2F5233; --forest-deep:#213A26; --sage:#E4EBE0;
  --brick:#A23B2E; --brick-soft:#F3E1DD; --gold:#B4842A; --white:#FFFFFF;
  --wa:#25D366;
}
*{box-sizing:border-box;}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Inter',sans-serif;-webkit-font-smoothing:antialiased;}
.wrap{max-width:960px;margin:0 auto;padding:36px 24px 80px;}

.login-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--paper);}
.login-box{background:var(--white);border:2px solid var(--ink);padding:32px 34px;width:280px;text-align:center;}
.login-box h1{font-family:'Lora',serif;margin:0 0 6px;font-size:22px;}
.login-box p{font-size:13px;color:var(--ink-soft);margin:0 0 16px;}
.login-box input{width:100%;padding:10px;border:1px solid var(--line);margin-bottom:12px;font-size:14px;}
.login-erro{color:var(--brick);font-size:12.5px;min-height:16px;margin-top:8px;}

.cover{border-bottom:2px solid var(--ink);padding-bottom:20px;display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:12px;}
.cover h1{font-family:'Lora',serif;font-weight:700;font-size:28px;margin:0;letter-spacing:-0.01em;}
.cover .sub{font-size:13px;color:var(--ink-soft);margin-top:4px;}
.cover .today{font-size:13px;color:var(--ink-soft);text-align:right;}

.tabs{display:flex;gap:6px;}
.tab-btn{font-family:'Lora',serif;font-weight:600;font-size:15px;background:var(--paper-alt);border:2px solid var(--ink);border-bottom:none;color:var(--ink-soft);padding:10px 22px 8px;border-radius:8px 8px 0 0;cursor:pointer;position:relative;top:2px;}
.tab-btn.active{background:var(--paper);color:var(--ink);border-bottom:2px solid var(--paper);}
.tab-btn.empresa.active{color:var(--forest-deep);}
.tab-btn.familia.active{color:var(--gold);}

.panel{border:2px solid var(--ink);border-top:none;background:var(--paper);padding:28px 26px 8px;}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:28px;}
.card{background:var(--white);border:1px solid var(--line);border-left:4px solid var(--forest);padding:14px 16px;}
.card.saida{border-left-color:var(--brick);}
.card.saldo{border-left-color:var(--gold);}
.card .label{font-size:11.5px;color:var(--ink-soft);margin-bottom:6px;}
.card .value{font-family:'Lora',serif;font-weight:700;font-size:21px;font-variant-numeric:tabular-nums;}
.card.saida .value{color:var(--brick);}
.card.entrada .value{color:var(--forest-deep);}

section{margin-bottom:32px;}
h2{font-family:'Lora',serif;font-size:17px;font-weight:600;margin:0 0 14px;display:flex;align-items:center;gap:10px;}
h2::after{content:"";flex:1;height:1px;background:var(--line);}

.accounts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-bottom:14px;}
.account-card{background:var(--white);border:1px solid var(--line);padding:12px 14px;position:relative;}
.account-card .bank{font-size:11px;color:var(--ink-soft);}
.account-card .name{font-weight:600;font-size:14.5px;margin:2px 0 8px;}
.account-card .bal{font-family:'Lora',serif;font-weight:700;font-size:18px;font-variant-numeric:tabular-nums;}
.account-card .del{position:absolute;top:8px;right:8px;background:none;border:none;color:var(--ink-soft);cursor:pointer;font-size:13px;opacity:0.5;}
.account-card .del:hover{opacity:1;color:var(--brick);}

.form-row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:8px;}
.field{display:flex;flex-direction:column;gap:4px;}
.field label{font-size:11px;color:var(--ink-soft);}
.field input,.field select{font-family:'Inter',sans-serif;font-size:13.5px;padding:8px 10px;border:1px solid var(--line);background:var(--white);color:var(--ink);min-width:120px;}
.field input:focus,.field select:focus{outline:2px solid var(--forest);outline-offset:-1px;}
.btn{font-family:'Inter',sans-serif;font-weight:600;font-size:13.5px;padding:9px 18px;background:var(--forest);color:var(--white);border:none;cursor:pointer;}
.btn:hover{background:var(--forest-deep);}
.btn.ghost{background:transparent;color:var(--forest);border:1px solid var(--forest);}
.btn.ghost:hover{background:var(--sage);}

table{width:100%;border-collapse:collapse;font-size:13.5px;}
thead th{text-align:left;font-weight:600;font-size:11.5px;color:var(--ink-soft);border-bottom:1.5px solid var(--ink);padding:6px 8px;}
tbody td{padding:9px 8px;border-bottom:1px solid var(--line);vertical-align:top;}
tbody tr:hover{background:var(--paper-alt);}
tbody tr.revisar{background:var(--brick-soft);}
.val-entrada{color:var(--forest-deep);font-weight:600;font-variant-numeric:tabular-nums;}
.val-saida{color:var(--brick);font-weight:600;font-variant-numeric:tabular-nums;}
.tag{display:inline-block;font-size:11px;padding:2px 8px;background:var(--paper-alt);border:1px solid var(--line);color:var(--ink-soft);}
.tag.wa{border-color:var(--wa);color:#1a8f4c;}
.tag.revisar{border-color:var(--brick);color:var(--brick);}
.row-actions button{background:none;border:none;color:var(--ink-soft);cursor:pointer;font-size:13px;opacity:.6;margin-left:4px;}
.row-actions button:hover{opacity:1;}
.empty{color:var(--ink-soft);font-size:13px;font-style:italic;padding:14px 0;}
.filters{display:flex;gap:10px;margin-bottom:12px;flex-wrap:wrap;}

@media (max-width:640px){
  .cards{grid-template-columns:1fr;}
  .cover{flex-direction:column;align-items:flex-start;}
  table{font-size:12px;}
}