:root{
  --bg:#f2f4f8;
  --fg:#222;
  --card:#fff;
  --muted:#666;
  --primary:#0d6efd;
  --danger:#dc3545;
  --ok:#28a745;
}

*{box-sizing:border-box}
body{
  font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  background: var(--bg);
  color: var(--fg);
  margin:0;
}
main{max-width:700px;margin:0 auto;min-height:100dvh;padding:1.2rem}

.topbar{display:flex;gap:.6rem;align-items:baseline}
.topbar h1{margin:.2rem 0}
.subtitle{color:var(--muted);font-size:.9rem}

.card{
  background:var(--card);
  border-radius:12px;
  padding:1rem;
  box-shadow:0 2px 10px rgba(0,0,0,.05);
  margin:.8rem 0;
}
button{
  border:none;border-radius:10px;padding:.7rem 1rem;cursor:pointer;
}
button.primary{background:var(--primary);color:#fff}
button.ghost{background:#e9eef6;color:#111}
button.danger{background:var(--danger);color:#fff}
button.back{margin:.3rem 0}

.row{display:flex;gap:.6rem;align-items:center}
.row.end{justify-content:flex-end}

label{display:block;margin:.6rem 0}
input[type="text"], input[type="number"]{
  width:100%;padding:.7rem;border:1px solid #ddd;border-radius:10px;font-size:16px;
}
input[type="number"]{ /* Melhor UX no mobile */
  -moz-appearance: textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance: none; margin: 0;
}

fieldset.period-field{
  border:1px solid #eee;border-radius:10px;padding:.6rem;margin:.6rem 0;
}
fieldset label{margin-right:1rem}

.panel-head{display:flex;justify-content:space-between;align-items:center;margin:.5rem 0}
.box-list{list-style:none;padding:0;margin:0}
.box-item{
  display:flex;justify-content:space-between;align-items:center;
  padding:.8rem 1rem;border-radius:12px;background:#fff;
  box-shadow:0 1px 6px rgba(0,0,0,.04);margin:.6rem 0;cursor:pointer
}
.box-left{display:flex;align-items:center;gap:.8rem}
.color-dot{width:8px;height:20px;border-radius:4px}
.badge{background:#eef1f6;border-radius:999px;padding:.1rem .5rem;color:#333;font-size:.75rem}

.total-wrap{
  display:flex;gap:.6rem;justify-content:space-between;align-items:center;margin-top:.8rem
}
.hidden{display:none}

.balance{display:flex;justify-content:space-between;align-items:center;margin:1rem 0}
.balance-positive{color:var(--ok)}
.balance-negative{color:var(--danger)}
.meta{color:var(--muted);font-size:.9rem}

.box-header{display:flex;gap:.8rem;align-items:center;margin:.6rem 0}
.color-bar{width:6px;height:40px;border-radius:3px;background:#ddd}
.box-title h2{margin:.1rem 0}

.expense-list{list-style:none;padding:0;margin:0}
.exp-item{
  display:flex;justify-content:space-between;align-items:center;
  border-bottom:1px solid #eee;padding:.5rem 0
}
.exp-item .actions{display:flex;gap:.4rem}
.small{font-size:.88rem;color:var(--muted)}
.edit-btn, .del-btn{
  border:none;border-radius:8px;padding:.35rem .6rem;cursor:pointer;font-size:.85rem
}
.edit-btn{background:#ffc107;color:#111}
.del-btn{background:var(--danger);color:#fff}

.foot{margin:2rem 0 1rem;color:#777;text-align:center;font-size:.85rem}

@media (max-width:520px){
  main{padding:.9rem}
  .box-item{padding:.7rem .8rem}
}