.budget-overview {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.budget-overview-card,
.budget-card,
.budget-empty-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.budget-overview-card {
    display: grid;
    gap: 4px;
    padding: 20px;
}

.budget-overview-card span,
.budget-overview-card small {
    color: var(--muted);
}

.budget-overview-card strong {
    font-size: 1.8rem;
    letter-spacing: -0.04em;
}

.budget-toolbar {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    margin: 18px 0;
}

.compact-field {
    width: min(230px, 100%);
}

.budget-toolbar-note {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 0.84rem;
}

.budgets-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.budget-card {
    display: grid;
    gap: 16px;
    padding: 22px;
}

.budget-card-header,
.budget-card-footer {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.budget-card-header h2,
.budget-card-header p {
    margin: 0;
}

.budget-card-header h2 {
    font-size: 1.2rem;
    letter-spacing: -0.03em;
}

.budget-card-header p,
.budget-card-footer span {
    color: var(--muted);
    font-size: 0.82rem;
}

.budget-progress {
    height: 11px;
    overflow: hidden;
    border-radius: 999px;
    background: #e7edf6;
}

.budget-progress > div {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #2563eb, #60a5fa);
}

.budget-progress.warning > div {
    background: linear-gradient(90deg, #f59e0b, #fb923c);
}

.budget-progress.danger > div {
    background: linear-gradient(90deg, #dc2626, #f87171);
}

.budget-values {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.budget-values strong {
    font-size: 1.85rem;
    letter-spacing: -0.04em;
}

.budget-values span {
    color: var(--muted);
}

.budget-card-actions {
    display: flex;
    gap: 5px;
}

.budget-empty-card {
    display: grid;
    justify-items: center;
    padding: 44px 24px;
    text-align: center;
}

.budget-empty-card > span {
    display: grid;
    width: 64px;
    height: 64px;
    place-items: center;
    border-radius: 20px;
    background: var(--primary-soft);
    color: var(--primary-dark);
}

.budget-empty-card h2 {
    margin: 16px 0 6px;
}

.budget-empty-card p {
    max-width: 480px;
    margin: 0 0 18px;
    color: var(--muted);
}

@media (max-width: 800px) {
    .budget-overview,
    .budgets-grid {
        grid-template-columns: 1fr;
    }

    .budget-toolbar {
        align-items: stretch;
        flex-direction: column;
    }
}