:root{
  --bg:#0c0c0c;
  --surface:#161616;
  --surface-2:#1e1e1e;
  --surface-3:#272727;
  --border:#2c2c2c;
  --text:#f4f4f2;
  --text-muted:#a3a39d;
  --text-faint:#6b6b64;
  --yellow:#ffe100;
  --yellow-ink:#1a1600;
  --yellow-soft:rgba(255,225,0,0.10);
  --green:#3ecf8e;
  --green-soft:rgba(62,207,142,0.14);
  --orange:#ff8a3d;
  --orange-soft:rgba(255,138,61,0.14);
  --pink:#ff5577;
  --pink-soft:rgba(255,85,119,0.16);
  --focus:#7fd4ff;
  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:10px;
}

*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Manrope',system-ui,sans-serif;
  line-height:1.5;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Manrope',sans-serif; margin:0;}
button{font-family:inherit;}
:focus-visible{outline:2px solid var(--focus); outline-offset:2px;}

.wrap{max-width:520px; margin:0 auto; padding:20px 16px 100px;}

.topbar{display:flex; align-items:center; justify-content:space-between; padding:8px 2px 22px;}
.brand{display:flex; align-items:center; gap:10px;}
.brand .mark{width:34px; height:34px; border-radius:10px; background:var(--yellow); color:var(--yellow-ink); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px;}
.brand .name{font-weight:700; font-size:15px;}
.brand .name span{display:block; font-weight:500; font-size:11px; color:var(--text-faint);}
.icon-btn{width:38px; height:38px; border-radius:50%; border:1px solid var(--border); background:var(--surface); color:var(--text-muted); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:16px;}
.icon-btn:hover{background:var(--surface-2); color:var(--text);}
.topbar-actions{display:flex; align-items:center; gap:8px;}
.icon-btn svg{width:18px; height:18px; display:block;}
.icon-btn[aria-pressed="true"]{color:var(--yellow); border-color:rgba(255,225,0,0.35); background:var(--yellow-soft);}
body.values-hidden .big, body.values-hidden .valor, body.values-hidden .parcela{letter-spacing:0.08em;}

.balance-card{
  background:linear-gradient(155deg,#1a1a1a 0%, #101010 60%, #0c0c0c 100%);
  border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:24px 22px; position:relative; overflow:hidden; margin-bottom:18px;
}
.balance-card::after{
  content:""; position:absolute; top:-60px; right:-60px; width:180px; height:180px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,225,0,0.16) 0%, rgba(255,225,0,0) 70%);
}
.balance-card .label{font-size:12px; color:var(--text-muted); margin-bottom:6px;}
.balance-card .big{font-size:34px; font-weight:800; color:var(--yellow); letter-spacing:-0.01em;}
.balance-card .meta{display:flex; gap:18px; margin-top:18px; flex-wrap:wrap;}
.balance-card .meta .item .k{font-size:11px; color:var(--text-faint); margin-bottom:3px;}
.balance-card .meta .item .v{font-size:14px; font-weight:600;}

.quick-actions{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:22px;}
.qa-btn{display:flex; flex-direction:column; align-items:center; gap:7px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:14px 6px; cursor:pointer; color:var(--text);}
.qa-btn:hover{background:var(--surface-2);}
.qa-btn .ic{width:36px; height:36px; border-radius:50%; background:var(--yellow-soft); color:var(--yellow); display:flex; align-items:center; justify-content:center; font-size:17px; font-weight:700;}
.qa-btn span.lbl{font-size:11px; color:var(--text-muted); text-align:center;}

section{margin-bottom:22px;}
.section-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; gap:10px; flex-wrap:wrap;}
.section-head h2{font-size:16px; font-weight:700;}
select{background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:var(--radius-sm); padding:7px 10px; font-size:12px;}

#alertBox{border-radius:var(--radius-md); padding:16px 18px; margin-bottom:22px; background:linear-gradient(120deg, var(--orange-soft), var(--pink-soft)); border:1px solid rgba(255,138,61,0.35);}
#alertBox.has-overdue{border-color:rgba(255,85,119,0.5);}
#alertBox h3{font-size:13px; font-weight:700; margin-bottom:10px;}
.alert-row{display:flex; justify-content:space-between; font-size:13.5px; padding:6px 0;}
.alert-row .tag{font-size:12px; color:var(--text-muted);}
.alert-row.overdue .tag{color:var(--pink); font-weight:700;}

.strategy-toggle{display:flex; gap:6px; background:var(--surface); padding:4px; border-radius:999px; border:1px solid var(--border);}
.strategy-toggle button{border:none; background:transparent; color:var(--text-muted); padding:6px 14px; font-size:12px; border-radius:999px; cursor:pointer; font-weight:600;}
.strategy-toggle button.active{background:var(--yellow); color:var(--yellow-ink);}
.strategy-box{border:1px solid var(--border); border-radius:var(--radius-md); padding:16px 18px; background:var(--surface);}
.strategy-box p.explain{font-size:12.5px; color:var(--text-muted); margin:0 0 12px;}
.strategy-list{list-style:none; margin:0; padding:0;}
.strategy-list li{display:flex; gap:12px; align-items:baseline; padding:9px 0; border-top:1px solid var(--border); font-size:13.5px;}
.strategy-list li:first-child{border-top:none;}
.strategy-list .rank{color:var(--yellow); font-weight:800; width:16px; flex-shrink:0;}
.strategy-list .nm{flex:1; min-width:0;}
.strategy-list .foco{font-size:10.5px; color:var(--green); margin-left:8px; font-weight:700;}
.strategy-list .amt{color:var(--text-muted); font-size:12.5px;}

.ledger{display:flex; flex-direction:column; gap:10px;}
.row{display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:14px;}
.row .avatar{width:42px; height:42px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px; color:var(--yellow-ink); background:var(--yellow);}
.row.status-atrasada .avatar{background:var(--pink); color:#2a0510;}
.row.status-proxima .avatar{background:var(--orange); color:#2a1400;}
.row.status-quitada .avatar{background:var(--surface-3); color:var(--text-faint);}
.row .info{flex:1; min-width:0;}
.row .nome{font-weight:700; font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.row .categoria{font-size:11.5px; color:var(--text-muted); margin-top:2px;}
.row .progress-track{height:4px; background:var(--surface-3); border-radius:2px; margin-top:8px; max-width:160px; overflow:hidden;}
.row .progress-fill{height:100%; background:var(--green);}
.row .right{text-align:right; flex-shrink:0;}
.row .valor{font-weight:800; font-size:14.5px;}
.row .rel{font-size:11px; color:var(--text-muted); margin-top:3px;}
.row.status-atrasada .rel{color:var(--pink); font-weight:700;}
.row.status-proxima .rel{color:var(--orange); font-weight:700;}
.row.status-quitada{opacity:0.55;}
.row .actions{display:flex; gap:6px; margin-top:8px; justify-content:flex-end;}

.btn{border:1px solid var(--border); background:var(--surface-2); color:var(--text); padding:7px 12px; border-radius:999px; font-size:12px; font-weight:600; cursor:pointer;}
.btn:hover{background:var(--surface-3);}
.btn-primary{background:var(--yellow); border-color:var(--yellow); color:var(--yellow-ink);}
.btn-primary:hover{background:#ffe94d;}
.btn-ghost{background:transparent; border-color:transparent; color:var(--text-muted); padding:6px 8px;}
.btn-ghost:hover{color:var(--text); background:var(--surface-3);}
.btn-danger-ghost{color:#ff8fa3;}
.btn-danger-ghost:hover{background:var(--pink-soft); color:#ffb3c1;}

.empty{text-align:center; padding:40px 18px; color:var(--text-muted); border:1px dashed var(--border); border-radius:var(--radius-md);}
.empty p{margin:0 0 14px; font-size:13.5px;}

footer{border-top:1px solid var(--border); padding-top:18px; margin-top:6px; display:flex; flex-direction:column; gap:12px; font-size:12.5px; color:var(--text-muted);}
footer .group{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
footer label{display:flex; align-items:center; gap:6px;}
footer input[type=number]{width:48px; background:var(--surface); border:1px solid var(--border); color:var(--text); border-radius:var(--radius-sm); padding:5px 7px;}

.overlay{position:fixed; inset:0; background:rgba(0,0,0,0.75); display:none; align-items:flex-end; justify-content:center; z-index:50;}
.overlay.open{display:flex;}
.modal{background:var(--surface); border:1px solid var(--border); border-radius:22px 22px 0 0; width:100%; max-width:520px; padding:22px 22px 26px; max-height:92vh; overflow-y:auto;}
@media (min-width:560px){ .overlay{align-items:center;} .modal{border-radius:var(--radius-lg);} }
.modal h2{font-size:18px; margin-bottom:16px;}
.field{margin-bottom:13px;}
.field label{display:block; font-size:12.5px; color:var(--text-muted); margin-bottom:6px;}
.field input, .field select, .field textarea{width:100%; background:var(--surface-2); border:1px solid var(--border); color:var(--text); border-radius:var(--radius-sm); padding:10px 12px; font-size:16px; font-family:inherit;}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--yellow);}
.field textarea{resize:vertical; min-height:54px;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.checkbox-field{display:flex; align-items:center; gap:8px; font-size:13.5px;}
.checkbox-field input{width:auto;}
.modal-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:18px;}

.toast{position:fixed; bottom:20px; left:50%; transform:translateX(-50%) translateY(12px); background:var(--surface-3); border:1px solid var(--border); color:var(--text); padding:11px 20px; border-radius:999px; font-size:13px; opacity:0; transition:opacity 200ms ease, transform 200ms ease; pointer-events:none; z-index:60;}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

@media (prefers-reduced-motion:reduce){ *{transition:none !important;} }

@media (max-width:420px){
  .wrap{padding:16px 12px 90px;}
  .balance-card .big{font-size:28px;}
  .quick-actions{gap:8px;}
  .qa-btn{padding:12px 4px;}
  .field-row{grid-template-columns:1fr;}
  .row{align-items:flex-start;}
  .row .actions{flex-wrap:wrap; justify-content:flex-start;}
}

.parcela{font-size:11px;color:var(--yellow);font-weight:700;margin-top:2px;}
.field-hint{display:none;font-size:12.5px;color:var(--text-muted);margin:-2px 0 14px;line-height:1.45;}