:root {
  --bg: #f5f7fb;
  --ink: #0f172a;
  --muted: #64748b;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.app-nav {
  background: linear-gradient(135deg, #1e293b, #0f172a);
  box-shadow: 0 1px 0 rgba(15, 23, 42, .15);
}

/* ---- Login ---- */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 60%, #4338ca 100%);
  padding: 1.5rem;
}
.login-card {
  width: 100%;
  max-width: 420px;
  border-radius: 18px;
}
.brand-mark {
  width: 56px;
  height: 56px;
  margin: 0 auto;
  border-radius: 14px;
  background: linear-gradient(135deg, #4f46e5, #2563eb);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  box-shadow: 0 6px 18px rgba(79, 70, 229, .35);
}

/* ---- Stat cards ---- */
.stat-card {
  border-radius: 16px;
  padding: 1.25rem 1.4rem;
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(15, 23, 42, .08);
}
.stat-card .stat-label {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  opacity: .85;
}
.stat-card .stat-value {
  font-size: 1.6rem;
  font-weight: 700;
  margin-top: .35rem;
  line-height: 1.2;
}
.stat-card .stat-sub {
  font-size: .8rem;
  opacity: .75;
  margin-top: .25rem;
}
.stat-credit  { background: linear-gradient(135deg, #059669, #10b981); }
.stat-debit   { background: linear-gradient(135deg, #be123c, #ef4444); }
.stat-net     { background: linear-gradient(135deg, #1d4ed8, #3b82f6); }
.stat-pending { background: linear-gradient(135deg, #b45309, #f59e0b); }

/* ---- Table ---- */
.tx-table thead th {
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #6b7280;
  font-weight: 600;
  background: #fafbff;
  border-bottom: 1px solid #e5e7eb;
}
.tx-table tbody td {
  vertical-align: middle;
  border-color: #f1f3f8;
}
.tx-table tbody tr:hover {
  background: #f8fafc;
}
.tx-table .row-pending {
  background: #fffaf2;
}
.tx-table .row-pending:hover {
  background: #fff4e0;
}
.amount-debit  { color: #b91c1c; }
.amount-credit { color: #15803d; }

/* ---- Category pills ---- */
.cat-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .15rem .65rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 500;
  color: var(--cat-color, #475569);
  background: color-mix(in srgb, var(--cat-color, #475569) 12%, white);
  border: 1px solid color-mix(in srgb, var(--cat-color, #475569) 25%, white);
}
.cat-dot {
  width: 10px; height: 10px; border-radius: 999px;
  display: inline-block;
}

/* ---- Forms ---- */
.form-control:focus, .form-select:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 .15rem rgba(99, 102, 241, .15);
}
.btn-primary {
  background: linear-gradient(135deg, #4f46e5, #2563eb);
  border: none;
}
.btn-primary:hover, .btn-primary:focus {
  background: linear-gradient(135deg, #4338ca, #1d4ed8);
}

/* ---- Misc ---- */
.card {
  border-radius: 14px;
}
code {
  background: #f1f3f8;
  padding: .1rem .35rem;
  border-radius: 4px;
  color: #1e293b;
}
@media (max-width: 768px) {
  .stat-card .stat-value { font-size: 1.3rem; }
}