:root {
    --kb-bg: #f5f7fb;
    --kb-card: #ffffff;
    --kb-border: #e5e7eb;
    --kb-income: #198754;
    --kb-expense: #dc3545;
    --kb-purple: #7c3aed;
}

body {
    background: var(--kb-bg);
    color: #111827;
}

.app-shell {
    max-width: 1500px;
}

.month-title {
    font-size: clamp(2rem, 4vw, 3.75rem);
    font-weight: 800;
    letter-spacing: -0.03em;
}

.summary-card,
.table-card {
    border: 0;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
}

.summary-label {
    color: #6b7280;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
}

.summary-value {
    font-size: 1.55rem;
    font-weight: 800;
}

.income { color: var(--kb-income); }
.expense { color: var(--kb-expense); }

.category-bar {
    height: 8px;
    border-radius: 999px;
    background: #e5e7eb;
    overflow: hidden;
}

.category-bar > span {
    display: block;
    height: 100%;
    background: #0d6efd;
    border-radius: inherit;
}

.table-responsive {
    min-height: 320px;
}

.table thead th {
    white-space: nowrap;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6b7280;
    border-bottom-width: 1px;
}

.table tbody td {
    vertical-align: middle;
}

.nr-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    padding: .2rem .45rem;
    border-radius: 999px;
    background: #eef2ff;
    color: #3730a3;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.frequency-badge {
    display: inline-block;
    border-radius: 999px;
    padding: .28rem .58rem;
    font-size: .78rem;
    font-weight: 700;
    background: #f3f4f6;
    color: #374151;
}

.frequency-badge.subscription {
    background: #f3e8ff;
    color: #7e22ce;
}

.type-badge {
    min-width: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .3rem .6rem;
    border-radius: 999px;
    font-weight: 800;
    font-size: .78rem;
}

.type-af {
    color: #b91c1c;
    background: #fee2e2;
}

.type-bij {
    color: #166534;
    background: #dcfce7;
}

.amount-cell {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    white-space: nowrap;
}

.toolbar .form-control,
.toolbar .form-select,
.toolbar .btn {
    min-height: 42px;
}

.empty-state {
    padding: 4rem 1rem;
    color: #6b7280;
    text-align: center;
}

.month-nav-btn {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 767.98px) {
    .summary-value { font-size: 1.25rem; }
    .month-title { font-size: 2.4rem; }
}