body { font-family: 'Inter', system-ui, sans-serif; }
.card { border: none; }
.navbar-brand { font-weight: 600; }
.brand-logo { height: 150px; width: auto; }
.login-logo { max-height: 180px; }
.chart-container { height: 280px; }
canvas { min-height: 240px; width: 100% !important; }
.fallback-chart { display: flex; align-items: flex-end; gap: 12px; height: 260px; padding: 8px; background: #f8f9fa; border-radius: 8px; overflow-x: auto; }
.fallback-bar { flex: 1; min-width: 40px; position: relative; }
.fallback-bar > div { width: 100%; border-radius: 6px 6px 0 0; }
.fallback-label { font-size: 0.8rem; text-align: center; margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fallback-value { position: absolute; top: -22px; width: 100%; text-align: center; font-size: 0.75rem; }
.expenses-scroll { max-height: 420px; overflow-y: auto; border-radius: 8px; }

@media (max-width: 992px) {
	.table { font-size: 0.9rem; }
}

@media (max-width: 768px) {
	.brand-logo { height: 24px; }
	.navbar-brand span { font-size: 0.95rem; }
	.card-body { padding: 1rem; }
	.table td, .table th { padding: 0.5rem; }
	.table td .btn { margin-bottom: 0.25rem; }
}

@media (max-width: 576px) {
	.login-logo { max-height: 120px; }
	.table { font-size: 0.85rem; }
	.chart-container { height: 240px; }
	.expenses-scroll { max-height: 340px; }
}