:root { --bg:#0b0f14; --card:#121926; --text:#e7eef8; --muted:#9bb0c7; --accent:#4ea1ff; --danger:#ff5a67; --ok:#2fd47c; }
*{ box-sizing:border-box; }
body{ margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial; background:var(--bg); color:var(--text); }
.container{ max-width:980px; margin:0 auto; padding:20px; }
h1{ margin:0 0 10px; font-size:28px; }
h2{ margin:0 0 12px; font-size:18px; }
.card{ background:var(--card); border:1px solid rgba(255,255,255,0.06); border-radius:14px; padding:14px; margin:14px 0; }
.row{ display:flex; gap:12px; }
.grid{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
@media (max-width: 780px){ .grid{ grid-template-columns: 1fr; } }
label{ display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--muted); }
input, select, button{ border-radius:10px; border:1px solid rgba(255,255,255,0.12); background:#0f1520; color:var(--text); padding:10px 12px; font-size:14px; }
button{ background:var(--accent); border:none; color:#061423; font-weight:700; cursor:pointer; }
button.ghost{ background:transparent; border:1px solid rgba(255,255,255,0.18); color:var(--text); }
button:hover{ filter:brightness(1.05); }
.muted{ color:var(--muted); }
.error{ margin-top:8px; color:var(--danger); }
.summary{ display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; }
@media (max-width: 780px){ .summary{ grid-template-columns: 1fr; } }
.sum-item{ padding:12px; border-radius:12px; border:1px solid rgba(255,255,255,0.08); background:rgba(0,0,0,0.10); }
.sum-item.overdue{ border-color: rgba(255,90,103,0.45); }
.sum-item.paid{ border-color: rgba(47,212,124,0.35); }
.sum-value{ font-size:20px; font-weight:900; margin-top:4px; }

.list{ display:flex; flex-direction:column; gap:10px; }
.tx{ display:flex; justify-content:space-between; gap:12px; padding:12px; border-radius:12px; border:1px solid rgba(255,255,255,0.08); background:rgba(0,0,0,0.12); }
.tx.overdue{ border-color: rgba(255,90,103,0.45); }
.tx.paid{ border-color: rgba(47,212,124,0.35); }
.tx-title{ font-weight:700; }
.tx-sub{ font-size:12px; margin-top:4px; }
.tx-right{ text-align:right; }
.tx-amount{ font-weight:800; }
.tx-actions{ display:flex; gap:8px; justify-content:flex-end; margin-top:8px; flex-wrap:wrap; }
.tx-actions button{ padding:8px 10px; font-size:12px; }
.tx-actions button.danger{ border:1px solid rgba(255,90,103,0.45); color:var(--danger); background:transparent; }
.badge{ font-size:12px; color:var(--ok); }