:root{
  --bg:#0c0f12;
  --text:#e9eef2;
  --muted:#9aa7b2;
  --line:#1f2a33;
  --accent:#14b8a6;
  --danger:#ef4444;
}

*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;background:var(--bg);color:var(--text)}
.bg{min-height:100vh;background:radial-gradient(1200px 500px at 50% -10%, rgba(20,184,166,.20), transparent 55%), var(--bg)}

.topbar{
  position:sticky;top:0;z-index:10;
  background:rgba(12,15,18,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  padding:10px 12px;
}
.topbarRow{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.topbarRow1{padding-bottom:8px}
.topbarRow2{padding-bottom:8px}
.topbarRow3{display:flex;gap:8px}

.brand{font-weight:900;letter-spacing:.2px}
.monthNav{
  display:flex;align-items:center;
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);
  padding:0px 2px;
  border-radius:14px;
}
.monthTitle{font-weight:800;color:var(--accent);white-space:nowrap;min-width:150px;text-align:center}
.just-space{width: 250px;}
.profileBox{display:flex;align-items:center;gap:8px;min-width:260px}
.profileLabel{color:var(--muted);font-size:.85rem}
.actionsBar{display:flex;gap:8px;flex-wrap:wrap}

.grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  padding:14px;
  max-width:1400px;
  margin:0 auto;
}

.panel{
  background:linear-gradient(180deg, rgba(17,22,27,.92), rgba(17,22,27,.85));
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.panel h2{margin:0;padding:12px 14px;border-bottom:1px solid var(--line);color:var(--accent);font-size:1rem}
.tableWrap{overflow:auto}

.table{width:100%;border-collapse:collapse}
.table thead th{padding:10px 12px;border-bottom:1px solid var(--line);color:var(--muted);font-weight:700;text-align:left;font-size:.90rem}
.table tbody td{padding:10px 12px;border-bottom:1px solid rgba(31,42,51,.9);font-size:.95rem;vertical-align:middle}
.col-check{width:44px}
.col-actions{width:160px}
.col-val{width:140px}
.col-desc{white-space:nowrap;text-overflow:ellipsis}
.table td.right,.table th.right{text-align:right}
.col-val{font-variant-numeric:tabular-nums;white-space:nowrap}
.actions{white-space:nowrap;text-align:right}
.actions .btn{margin-left:6px}
.table tr.paid td{opacity:.55;text-decoration:line-through}

.footer{display:flex;justify-content:space-between;gap:10px;padding:12px 16px;border-top:1px solid var(--line);max-width:1400px;margin:0 auto}
.footerSticky{}

.btn{
  border:1px solid var(--line);
  background:transparent;color:var(--text);
  padding:9px 12px;border-radius:12px;cursor:pointer;
  transition:transform .05s ease, box-shadow .15s ease, border-color .15s ease;
  display:inline-flex;align-items:center;justify-content:center;
}
.btn:hover{border-color:rgba(20,184,166,.55);box-shadow:0 8px 20px rgba(0,0,0,.2)}
.btn:active{transform:translateY(1px)}
.btn-sm{padding:6px 10px;border-radius:10px;font-size:.85rem}
.btn-icon{width:24px;height:24px;padding:0;border-radius:12px}
.btn-primary{background:rgba(20,184,166,.18);border-color:rgba(20,184,166,.6)}
.btn-danger{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.6)}
.btn-ghost{background:rgba(255,255,255,.03)}

.select,input{
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);
  color:var(--text);
  padding:10px 12px;border-radius:12px;
  outline:none;min-width:0;
}
.select:focus,input:focus{border-color:rgba(20,184,166,.7)}
label{display:block;margin:10px 0 6px;color:var(--muted);font-size:.9rem}
.inline{display:flex;gap:10px;align-items:center;margin-top:12px}
.msg{margin-top:10px;color:#ffd08a}
.note{color:var(--muted);font-size:.85rem;margin-top:8px}

.modal{
  position:fixed;inset:0;
  background:rgba(0,0,0,.62);
  backdrop-filter:blur(8px);
  display:none;align-items:center;justify-content:center;
  padding:16px;z-index:20;
}
.modal.open{display:flex}
.modalCard{
  width:min(620px,100%);
  max-height:calc(100vh - 40px);
  overflow:auto;
  background:linear-gradient(180deg, rgba(17,22,27,.98), rgba(10,14,18,.94));
  border:1px solid rgba(31,42,51,.95);
  border-radius:18px;
  padding:16px 16px 18px;
  box-shadow:0 28px 90px rgba(0,0,0,.65);
}
.modalHeader{
  display:flex;justify-content:space-between;align-items:center;
  padding-bottom:12px;margin-bottom:12px;
  border-bottom:1px solid rgba(31,42,51,.95);
}
.modalHeader h3{margin:0;color:var(--accent);font-size:1.05rem}
.modalCard input,.modalCard .select{width:100%}
.modalCard .btn-primary{width:100%;margin-top:14px}

.twoCols{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  align-items:center;
}
.installmentsBox{
  margin-top:10px;
  padding:12px;
  border:1px solid rgba(31,42,51,.9);
  border-radius:14px;
  background:rgba(255,255,255,.02);
}
.hidden{display:none !important;}

.row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.sep{border:none;border-top:1px solid var(--line);margin:16px 0}
.members{display:flex;flex-direction:column;gap:8px}
.memberItem{
  display:flex;justify-content:space-between;gap:10px;align-items:center;
  padding:10px 12px;border:1px solid var(--line);
  border-radius:12px;background:rgba(255,255,255,.03)
}
.muted{color:var(--muted);font-size:.85rem;margin-left:8px}
.pill{padding:4px 10px;border-radius:999px;border:1px solid var(--line);color:var(--muted);font-size:.8rem}

.mobileTabs{
  display:none;
  gap:8px;
  padding:10px 12px;
  border-bottom:1px solid var(--line);
  background:rgba(12,15,18,.92);
  position:sticky;
  top:118px;
  z-index:9;
}
.tabBtn{
  flex:1;border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  color:var(--text);
  border-radius:14px;
  padding:10px 12px;
  font-weight:800;
}
.tabBtn.active{
  border-color:rgba(20,184,166,.65);
  background:rgba(20,184,166,.12);
}

@media (max-width: 980px){
  .grid{grid-template-columns:1fr;padding-bottom:90px}
  .footerSticky{
    position:fixed;left:0;right:0;bottom:0;
    background:rgba(12,15,18,.92);
    backdrop-filter:blur(10px);
    border-top:1px solid var(--line);
    z-index:10;
    max-width:none;margin:0;
    padding:10px 12px;
    font-size:.92rem;
    display:grid;
    grid-template-columns:1fr;
    gap:6px;
  }
  .footerSticky > div{display:flex;justify-content:space-between;gap:10px}
}

@media (max-width: 720px){
  .topbar{padding:10px 10px}
  .monthTitle{min-width:140px;font-size:1rem}

  .profileBox{
    width:100%;
    min-width:0;
    display:grid;
    grid-template-columns:auto 1fr auto;
    gap:8px;
  }
  .actionsBar{
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:8px;
  }
  .actionsBar .btn{width:100%}

  .mobileTabs{display:flex;top:160px}
  .panel-income.hidden,.panel-expenses.hidden{display:none}


  .col-desc{white-space:normal;overflow:visible;text-overflow:unset}
  .actions{justify-content:flex-end}
  .btn-sm{padding:7px 10px}

  .modal{padding:0}
  .modalCardTx{
    width:100%;
    height:100%;
    max-height:none;
    border-radius:0;
  }

  .twoCols{grid-template-columns:1fr}

  .table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
  }
  .table thead th {
    padding: 2px 2px;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-weight: 700;
    text-align: left;
    font-size: 14px;
  }

  .table tbody td {
    padding: 2px 2px;
    border-bottom: 1px solid rgba(31, 42, 51, .9);
    font-size: 14px;
    vertical-align: middle;
  }

  .btn-sm {
    padding: 6px 10px;
    border-radius: 10px;
    font-size: 14px;
  }

  .actions .btn {
    margin-left: 6px;
  }
      
  .btn-sm {
    padding: 4px 5px;
  }
  
  .col-desc {
    white-space: nowrap;
    overflow: visible;
    text-overflow: unset;
  }

}

@media (max-width: 380px){
  .monthTitle{min-width:120px}
  .actionsBar{grid-template-columns:1fr 1fr}
}