.trip-budget-page {
    --trip-budget-ink: #1d2b37;
    --trip-budget-muted: #74828e;
    --trip-budget-border: #e6ebef;
    color: var(--trip-budget-ink);
}

.trip-budget-header {
    margin: 8px 0 18px;
    padding: 22px 24px;
    border-radius: 14px;
    background: linear-gradient(120deg, #f3f8f8, #eaf1f6);
}

.trip-budget-eyebrow {
    margin: 0;
    color: #638091;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.13em;
}

.trip-budget-header h2 {
    margin: 5px 0;
    font-size: 1.65rem;
}

.trip-budget-header > p:last-child {
    margin: 6px 0 0;
    color: var(--trip-budget-muted);
}

.trip-budget-overview {
    display: grid;
    grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
    align-items: center;
    gap: 24px;
    margin-bottom: 18px;
    padding: 20px;
    border: 1px solid var(--trip-budget-border);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 5px 22px rgba(34, 55, 70, 0.06);
}

.trip-budget-chart {
    display: flex;
    align-items: center;
    justify-content: center;
}

.trip-budget-donut {
    display: block;
    width: min(100%, 255px);
    overflow: visible;
}

.trip-budget-donut-segment { transition: stroke-dasharray 0.25s ease; }

.trip-budget-donut-caption {
    fill: #7d8b96;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-anchor: middle;
}

.trip-budget-donut-total {
    fill: #243746;
    font-size: 15px;
    font-weight: 800;
    text-anchor: middle;
}

.trip-budget-legend { display: flex; flex-direction: column; gap: 4px; }

.trip-budget-legend-item {
    display: grid;
    grid-template-columns: 12px minmax(100px, 1fr) auto 42px;
    align-items: center;
    gap: 10px;
    padding: 10px 4px;
    border-bottom: 1px solid #f0f3f5;
}

.trip-budget-color-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--category-color);
}

.trip-budget-legend-label { color: #53636e; font-size: 0.85rem; }
.trip-budget-legend-item strong { font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.trip-budget-share { color: var(--trip-budget-muted); font-size: 0.73rem; text-align: right; }

.trip-budget-totals {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}

.trip-budget-total-card {
    display: flex;
    min-height: 100px;
    flex-direction: column;
    justify-content: center;
    gap: 9px;
    padding: 17px 20px;
    border: 1px solid var(--trip-budget-border);
    border-radius: 12px;
    background: #fff;
}

.trip-budget-total-card > span { color: var(--trip-budget-muted); font-size: 0.82rem; }
.trip-budget-total-card small { font-size: 0.72rem; }
.trip-budget-total-card > strong { color: #243746; font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.trip-budget-total-main { border-color: #b6d9cd; background: #f2faf6; }
.trip-budget-total-main > strong { color: #21815d; font-size: 1.5rem; }

.trip-budget-details {
    padding: 20px;
    border: 1px solid var(--trip-budget-border);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 5px 22px rgba(34, 55, 70, 0.04);
}

.trip-budget-details-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.trip-budget-details-heading h3 { margin: 5px 0 0; font-size: 1.08rem; }
.trip-budget-details-heading > span { color: var(--trip-budget-muted); font-size: 0.75rem; }

.trip-budget-category { padding: 12px 0; border-top: 1px solid var(--trip-budget-border); }

.trip-budget-category-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.trip-budget-category-name { display: inline-flex; align-items: center; gap: 9px; font-size: 0.88rem; font-weight: 700; }
.trip-budget-category-heading > strong { font-size: 0.88rem; font-variant-numeric: tabular-nums; }

.trip-budget-expenses {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 7px 0 0 19px;
    padding: 0;
    list-style: none;
}

.trip-budget-expense {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    border-top: 1px solid #f2f4f6;
}

.trip-budget-expense-description { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.trip-budget-expense-day { color: #8996a0; font-size: 0.64rem; font-weight: 700; text-transform: uppercase; }
.trip-budget-expense-title { overflow-wrap: anywhere; color: #53636e; font-size: 0.78rem; }
.trip-budget-expense-amount { flex: 0 0 auto; color: #334652; font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.trip-budget-empty-category { margin: 8px 0 2px 19px; color: var(--trip-budget-muted); font-size: 0.76rem; font-style: italic; }

@media (max-width: 640px) {
    .trip-budget-header { padding: 17px; }
    .trip-budget-header h2 { font-size: 1.35rem; }
    .trip-budget-overview { grid-template-columns: 1fr; gap: 10px; padding: 15px; }
    .trip-budget-donut { width: min(75%, 230px); }
    .trip-budget-legend-item { grid-template-columns: 12px minmax(70px, 1fr) auto 34px; gap: 7px; padding: 8px 2px; }
    .trip-budget-legend-label, .trip-budget-legend-item strong { font-size: 0.77rem; }
    .trip-budget-totals { grid-template-columns: 1fr; gap: 9px; }
    .trip-budget-total-card { min-height: 82px; }
    .trip-budget-details { padding: 15px; }
}