:root { --bg:#f7f7f8; --card:#ffffff; --muted:#6b7280; --accent:#2563eb; }
body { font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background:var(--bg); margin:0; padding:20px; color:#111827; }
.topbar { display:flex; gap:12px; align-items:center; margin-bottom:18px; }
.brand { font-weight:700; font-size:20px; }
.controls { margin-left:auto; display:flex; gap:8px; align-items:center; }
.btn { padding:8px 12px; border-radius:8px; text-decoration:none; display:inline-block; border:1px solid rgba(0,0,0,0.06); background:var(--card); cursor:pointer; }
.btn.primary { background:var(--accent); color:#fff; border:none; }
.btn.ghost { background:transparent; }
.container { max-width:1100px; margin:0 auto; }
.grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap:16px; }
.card { background:var(--card); padding:14px; border-radius:10px; box-shadow: 0 6px 18px rgba(15,23,42,0.04); display:flex; flex-direction:column; min-height:160px; }
.card h4{ margin:0 0 8px 0; font-size:15px; }
.meta { display:flex; justify-content:space-between; color:var(--muted); font-size:13px; margin-bottom:8px; }
.amount { font-weight:700; font-size:18px; margin-top:auto; }
.actions { display:flex; gap:6px; margin-top:8px; }
.table { width:100%; border-collapse:collapse; background:var(--card); border-radius:8px; overflow:hidden; }
.table th, .table td { padding:10px; text-align:left; border-bottom:1px solid #eef2f7; }
tr.income td.entry-amount, tr.income td.entry-type { color: #008000; }
tr.expense td.entry-amount, tr.expense td.entry-type { color: #ff0000; }
.filterRow { display:flex; gap:8px; margin-bottom:12px; align-items:center; }
.input, select { padding:8px 10px; border-radius:8px; border:1px solid #e6e9ef; }
.small { font-size:13px; color:var(--muted); }
.preview-img { max-width:100%; max-height:160px; display:block; margin-top:8px; border-radius:6px; }
.brand img { width: 70px; height: 70px; }
/* SUMMARY BOX */
.summary-box {
    display: flex;
    gap: 15px;
    padding: 12px;
    background: #f7f7f7;
    border-radius: 8px;
    margin-bottom: 15px;
}
.summary-item { flex: 1; padding: 10px; border-radius: 6px; text-align: center; font-weight: bold; }
.income-box { background: #d4f7d4; color: #0a7a0a; }
.expense-box { background: #fbd6d6; color: #a30a0a; }
.balance-box { background: #e7e7ff; color: #3030a0; }

/* TABLE TITLES */
.income-title { color: #0a7a0a; }
.expense-title { color: #a30a0a; }

/* ROW COLORS */
.row-income { background: #f1fff1; }
.row-expense { background: #fff3f3; }

/* CARD COLORS */
.card-income { border-left: 4px solid #11aa11; }
.card-expense { border-left: 4px solid #dd0000; }

/* PAGINATION */
.pagination {
    text-align: center;
    padding: 10px;
}
.page-btn {
    padding: 6px 12px;
    margin: 0 4px;
    border: 1px solid #ccc;
    background: white;
}
.page-number {
    padding: 6px 12px;
}