/* Budget overview: monthly spending, unusual changes, and savings. */
.budget-overview { display: grid; gap: 20px; min-width: 0; }
.budget-overview-kpis { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.budget-overview-kpi { display: grid; align-content: start; gap: 12px; min-width: 0; padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-sm); }
.budget-overview-kpi--primary { background: linear-gradient(135deg,var(--budget-soft),var(--surface) 90%); border-color: color-mix(in srgb,var(--budget),var(--line) 78%); }
.budget-overview-kpi__label { color: var(--text-soft); font-size: 12px; font-weight: 650; }
.budget-overview-kpi > strong { color: var(--text); font: 740 clamp(22px,2.7vw,35px)/1.15 var(--font-display); letter-spacing: -.045em; overflow-wrap: anywhere; }
.budget-overview-kpi p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.65; }
.budget-overview-quality { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: -2px 0; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); background: var(--surface-2); font-size: 11px; line-height: 1.6; }
.budget-overview-quality button { margin-left: auto; padding: 6px 9px; border-radius: 7px; background: var(--surface); color: var(--text-soft); font-size: 11px; }
.budget-overview-quality[data-tone="warning"] { color: var(--warning); border-color: color-mix(in srgb,var(--warning),var(--line) 65%); background: color-mix(in srgb,var(--warning-soft),var(--surface) 55%); }
.budget-overview-panel { min-width: 0; padding: 26px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-sm); }
.budget-overview-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 22px; }
.budget-overview-heading > div { min-width: 0; }
.budget-overview-kicker { display: block; margin-bottom: 7px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .065em; text-transform: uppercase; }
.budget-overview-heading h3 { margin: 0; color: var(--text); font: 730 clamp(19px,2vw,24px)/1.2 var(--font-display); letter-spacing: -.025em; }
.budget-overview-heading p { max-width: 680px; margin: 9px 0 0; color: var(--muted); font-size: 11px; line-height: 1.65; }
.budget-history-range { display: flex; flex: 0 0 auto; gap: 2px; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.budget-history-range button { min-height: 32px; padding: 7px 11px; border-radius: 7px; background: transparent; color: var(--muted); font-size: 10px; font-weight: 650; white-space: nowrap; }
.budget-history-range button.is-active,.budget-history-range button[aria-pressed="true"] { background: var(--surface); color: var(--budget); box-shadow: var(--shadow-sm); }
.budget-history-range button:hover { color: var(--text); }
.budget-monthly-legend { display: flex; flex-wrap: wrap; gap: 12px 22px; margin-bottom: 18px; color: var(--muted); font-size: 10px; }
.budget-monthly-legend span { display: inline-flex; align-items: center; gap: 7px; }
.budget-monthly-legend i { width: 11px; height: 11px; border-radius: 3px; }
.budget-monthly-legend__actual { background: var(--budget); }
.budget-monthly-legend__forecast { border: 1px dashed var(--budget); background: var(--budget-soft); }
.budget-monthly-chart { overflow-x: auto; overscroll-behavior-inline: contain; padding: 4px 0 8px; scrollbar-width: thin; }
.budget-months { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(76px,1fr); align-items: end; gap: 10px; width: 100%; min-width: min-content; }
.budget-month { display: grid; grid-template-rows: auto 182px auto auto; align-items: end; gap: 10px; min-width: 76px; padding: 8px 5px 10px; border: 1px solid transparent; border-radius: 11px; background: transparent; color: var(--text); text-align: center; }
.budget-month:hover { background: var(--surface-2); }
.budget-month.is-selected { border-color: color-mix(in srgb,var(--budget),var(--line) 58%); background: color-mix(in srgb,var(--budget-soft),var(--surface) 58%); }
.budget-month__amount { display: block; font-size: 11px; font-weight: 720; white-space: nowrap; }
.budget-month__plot { position: relative; display: flex; flex-direction: column-reverse; align-items: center; justify-content: flex-start; width: 100%; height: 182px; border-bottom: 1px solid var(--line-strong); background: repeating-linear-gradient(to top,transparent 0,transparent 44px,var(--line) 45px,transparent 46px); }
.budget-month__bar { display: block; flex: 0 0 auto; width: min(54px,72%); min-height: 0; border-radius: 6px 6px 0 0; background: var(--budget); }
.budget-month:not(.is-selected) .budget-month__bar { background: color-mix(in srgb,var(--budget),var(--surface) 28%); }
.budget-month__forecast { display: block; flex: 0 0 auto; width: min(54px,72%); border: 1px dashed var(--budget); border-bottom: 0; border-radius: 6px 6px 0 0; background: repeating-linear-gradient(135deg,var(--budget-soft) 0,var(--budget-soft) 4px,color-mix(in srgb,var(--budget),transparent 75%) 4px,color-mix(in srgb,var(--budget),transparent 75%) 5px); }
.budget-month__label { color: var(--text-soft); font-size: 11px; font-weight: 650; text-transform: capitalize; }
.budget-month__note { display: block; min-height: 14px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.budget-month.is-partial .budget-month__note { color: var(--warning); }
.budget-overview-note { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; line-height: 1.65; }
.budget-overview-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; min-width: 0; }
.budget-insight-list { display: grid; gap: 12px; }
.budget-insight-card { display: grid; gap: 9px; min-width: 0; padding: 17px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-2); }
.budget-insight-card[data-tone="warning"] { border-color: color-mix(in srgb,var(--warning),var(--line) 65%); }
.budget-insight-card[data-tone="good"] { border-color: color-mix(in srgb,var(--success),var(--line) 65%); }
.budget-insight-card__tag { color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.budget-insight-card[data-tone="warning"] .budget-insight-card__tag { color: var(--warning); }
.budget-insight-card[data-tone="good"] .budget-insight-card__tag { color: var(--success); }
.budget-insight-card h4 { margin: 0; font-size: 13px; font-weight: 720; line-height: 1.45; }
.budget-insight-card p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.65; }
.budget-insight-card__amount { font: 720 22px/1.2 var(--font-display); letter-spacing: -.025em; }
.budget-insight-card small { color: var(--muted); font-size: 10px; line-height: 1.55; }
.budget-insight-card__action { justify-self: start; align-self: end; min-height: 34px; margin-top: 3px; padding: 8px 11px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--budget); font-size: 10px; font-weight: 650; }
.budget-insight-card__action:hover { border-color: var(--budget); background: var(--budget-soft); }
.budget-overview-categories { display: grid; gap: 8px; }
.budget-category { display: grid; gap: 10px; width: 100%; padding: 12px 0; background: transparent; color: var(--text); text-align: left; }
.budget-category:hover { background: var(--surface-2); border-radius: 8px; }
.budget-category__top { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; font-size: 12px; line-height: 1.45; }
.budget-category__top > :first-child { min-width: 0; }
.budget-category__top > :last-child { flex: 0 0 auto; font-weight: 720; }
.budget-category__track { display: block; height: 7px; overflow: hidden; border-radius: 20px; background: var(--surface-3); }
.budget-category__track i { display: block; height: 100%; border-radius: inherit; background: var(--budget); }
.budget-category__note { color: var(--muted); font-size: 10px; line-height: 1.5; }
.budget-savings-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.budget-savings-grid .budget-insight-card { grid-template-rows: auto auto auto 1fr auto; background: color-mix(in srgb,var(--health-soft),var(--surface) 78%); }
.budget-savings-grid .budget-insight-card__amount { color: var(--success); }
.budget-savings-tracking { padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); color: var(--text-soft); font-size: 12px; line-height: 1.7; }
.budget-savings-tracking p { margin: 4px 0; }
.budget-goal-calculator { display: grid; gap: 18px; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.budget-goal-calculator__intro h4 { margin: 0; font-size: 16px; }
.budget-goal-calculator__intro p { margin: 7px 0 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.budget-goal-fields { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.budget-goal-fields label { display: grid; gap: 8px; min-width: 0; color: var(--text-soft); font-size: 11px; font-weight: 650; }
.budget-goal-fields input { width: 100%; min-width: 0; min-height: 44px; padding: 11px 12px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--field); color: var(--text); font-size: 12px; }
.budget-goal-fields input::placeholder { color: var(--muted); font-weight: 400; font-size: 10px; }
.budget-goal-result { display: block; padding: 16px; border-radius: 12px; background: var(--budget-soft); color: var(--text-soft); font-size: 13px; line-height: 1.65; }
.budget-goal-calculator__privacy { margin: -7px 0 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.budget-overview-empty { grid-column: 1/-1; padding: 28px 18px; border: 1px dashed var(--line-strong); border-radius: 12px; color: var(--muted); font-size: 12px; line-height: 1.7; text-align: center; }
.budget-details { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.budget-details > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 24px; cursor: pointer; list-style: none; }
.budget-details > summary::-webkit-details-marker { display: none; }
.budget-details > summary strong { display: block; color: var(--text-soft); font-size: 13px; line-height: 1.45; }
.budget-details > summary small { display: block; margin-top: 6px; color: var(--muted); font-size: 10px; line-height: 1.55; }
.budget-details > summary:focus-visible { outline: 3px solid var(--budget); outline-offset: -3px; }
.budget-details__chevron { color: var(--muted); font-size: 22px; transition: transform .2s; }
.budget-details[open] .budget-details__chevron { transform: rotate(180deg); }
.budget-details__content { display: grid; gap: 16px; padding: 20px; border-top: 1px solid var(--line); background: var(--bg); }
.budget-details__content > .feature-grid,.budget-details__content > .metric-ribbon { margin-top: 0; }
.budget-details__content > .metric-ribbon { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; overflow: visible; border: 0; background: transparent; box-shadow: none; }
.budget-insight-dialog { width: min(640px,calc(100% - 32px)); max-height: calc(100dvh - 48px); overflow-y: auto; padding: 28px; border: 1px solid var(--line-strong); border-radius: 20px; background: var(--surface); color: var(--text); box-shadow: var(--shadow-md); }
.budget-insight-dialog::backdrop { background: rgba(7,13,10,.48); backdrop-filter: blur(4px); }
.budget-insight-dialog h3 { margin: 0 45px 15px 0; font-size: 22px; }
.budget-insight-dialog p { color: var(--muted); font-size: 12px; line-height: 1.7; }
.budget-insight-dialog__close { position: absolute; top: 18px; right: 18px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--surface-3); color: var(--text-soft); font-size: 20px; }
.budget-insight-dialog .transaction-item { min-width: 0; }
.budget-insight-dialog .transaction-item > div { min-width: 0; }
.budget-insight-dialog .transaction-item strong { white-space: nowrap; }
#budgetContent[data-state="loading"] .budget-overview-kpi > strong { color: var(--muted); }
#budgetContent[data-state="loading"] .budget-overview { opacity: .7; }
#budgetContent[data-state="loading"] .budget-history-range button { cursor: progress; }
.app.is-private .budget-overview :is(.budget-month__plot,.budget-category__track) { visibility: hidden; }
.app.is-private .budget-overview input[data-private] { -webkit-text-security: disc; text-shadow: none; color: transparent; caret-color: transparent; }
.app.is-private .budget-overview [data-private] :is(strong,b,small,span,p) { color: transparent !important; text-shadow: 0 0 8px var(--text); }
@media (max-width: 1100px) {
  .budget-overview-kpi { padding: 20px; }
  .budget-overview-panel { padding: 22px; }
  .budget-overview-columns { grid-template-columns: 1fr; }
  .budget-insight-list { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .budget-details__content > .metric-ribbon { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .budget-overview { gap: 16px; }
  .budget-overview-kpis { grid-template-columns: 1fr; gap: 10px; }
  .budget-overview-kpi { grid-template-columns: minmax(0,1fr) auto; gap: 9px 16px; padding: 18px; }
  .budget-overview-kpi > strong { grid-column: 2; grid-row: 1; font-size: 25px; text-align: right; }
  .budget-overview-kpi__label { align-self: center; font-size: 11px; }
  .budget-overview-kpi p { grid-column: 1/-1; font-size: 11px; }
  .budget-overview-heading { flex-wrap: wrap; gap: 15px; }
  .budget-overview-panel { padding: 20px 16px; border-radius: 16px; }
  .budget-overview-heading h3 { font-size: 21px; }
  .budget-months { gap: 5px; }
  .budget-month { min-width: 70px; grid-template-rows: auto 150px auto auto; }
  .budget-month__plot { height: 150px; }
  .budget-month__amount { font-size: 10px; }
  .budget-insight-list,.budget-savings-grid { grid-template-columns: 1fr; }
  .budget-goal-fields { grid-template-columns: 1fr; gap: 14px; }
  .budget-goal-fields input { min-height: 46px; font-size: 16px; }
  .budget-goal-fields input::placeholder { font-size: 12px; }
  .budget-details > summary { padding: 20px 16px; }
  .budget-details__content { padding: 12px; }
  .budget-details__content > .metric-ribbon { grid-template-columns: 1fr; gap: 10px; }
  .budget-insight-dialog { padding: 22px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .budget-overview *, .budget-details__chevron { transition: none !important; animation: none !important; }
}

/* Category cards share a single scale: percentage of total spending. */
.budget-overview-categories { gap: 0; }
.budget-category-summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: -2px 0 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.budget-category-summary > span { color: var(--muted); font-size: 11px; line-height: 1.5; }
.budget-category-summary strong { flex: 0 0 auto; color: var(--text); font-size: 16px; font-weight: 730; letter-spacing: -.025em; }
.budget-category-list { display: grid; gap: 6px; }
.budget-category-list[hidden] { display: none; }
.budget-category { grid-template-columns: 40px minmax(0,1fr) 10px; gap: 12px; align-items: center; padding: 14px 10px; border: 1px solid transparent; border-radius: 12px; transition: background .15s, border-color .15s; }
.budget-category:hover { border-color: var(--line); background: var(--surface-2); border-radius: 12px; }
.budget-category:focus-visible,.budget-category-toggle:focus-visible { outline: 2px solid var(--budget); outline-offset: 2px; }
.budget-category__emoji { display: grid; place-items: center; align-self: start; width: 40px; height: 40px; margin-top: 1px; border-radius: 12px; background: color-mix(in srgb,var(--category-color),var(--surface) 88%); font-family: 'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif; font-size: 23px; line-height: 1; }
.budget-category__body { display: grid; min-width: 0; gap: 8px; }
.budget-category__top { align-items: start; gap: 12px; }
.budget-category__top > b { font-size: 12px; font-weight: 650; line-height: 1.45; overflow-wrap: anywhere; }
.budget-category__numbers { display: grid; flex: 0 0 auto; gap: 3px; text-align: right; white-space: nowrap; }
.budget-category__numbers strong { color: var(--text); font-size: 13px; font-weight: 730; line-height: 1.4; }
.budget-category__numbers small { color: var(--muted); font-size: 10px; font-weight: 450; }
.budget-category__track { height: 5px; background: color-mix(in srgb,var(--category-color),var(--surface) 92%); }
.budget-category__track i { background: var(--category-color); }
.budget-category__note { font-size: 10px; color: var(--muted); }
.budget-category__arrow { color: var(--muted-2); font-size: 20px; }
.budget-category-toggle { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 42px; margin-top: 10px; padding: 11px 15px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); color: var(--budget); font-size: 11px; font-weight: 650; }
.budget-category-toggle:hover { background: var(--budget-soft); border-color: color-mix(in srgb,var(--budget),var(--line) 65%); }
.budget-category-footnote { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; line-height: 1.65; }
@media (max-width: 760px) {
  .budget-category { grid-template-columns: 34px minmax(0,1fr); gap: 10px; padding: 13px 2px; }
  .budget-category__emoji { width: 34px; height: 34px; border-radius: 10px; font-size: 21px; }
  .budget-category__arrow { display: none; }
  .budget-category__top { gap: 8px; }
  .budget-category__top > b { font-size: 12px; }
  .budget-category-summary { padding: 12px; }
  .budget-category-summary strong { font-size: 15px; }
}

/* Monthly selection, current balances, and a concrete savings scenario. */
.budget-overview-kpis { grid-template-columns: repeat(4,minmax(0,1fr)); }
.budget-overview-kpi { padding: 21px; }
.budget-overview-kpi > strong { font-size: clamp(22px,2.35vw,31px); }
.budget-overview-accounts { display: grid; gap: 10px; margin-top: -7px; }
.budget-overview-accounts__list { display: flex; flex-wrap: wrap; gap: 8px; }
.budget-overview-accounts__empty { color: var(--muted); font-size: 11px; }
.budget-overview-accounts > p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.budget-account-chip { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 5px 9px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text-soft); font-size: 11px; line-height: 1.45; }
.budget-account-chip strong { color: var(--text); font-size: 12px; font-weight: 720; }
.budget-account-chip small { color: var(--muted); font-size: 10px; }
.budget-monthly-context { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 7px 20px; margin: 0 0 16px; }
#budgetSelectedMonth { color: var(--budget); font-size: 13px; font-weight: 720; text-transform: capitalize; }
#budgetPeriodCoverage { color: var(--muted); font-size: 10px; line-height: 1.5; }
.budget-monthly-category-legend { display: flex; flex-wrap: wrap; gap: 8px 15px; margin-bottom: 20px; }
.budget-chart-legend-chip { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 10px; line-height: 1.4; }
.budget-chart-legend-chip i { display: inline-block; flex: 0 0 auto; width: 9px; height: 9px; border-radius: 3px; background: var(--category-color,var(--budget)); }
.budget-chart-legend-chip .budget-monthly-legend__forecast { background: var(--budget-soft); }
.budget-month__stack { display: flex; flex: 0 0 auto; flex-direction: column-reverse; width: min(54px,72%); min-height: 0; overflow: hidden; border-radius: 6px 6px 0 0; }
.budget-month__segment { display: block; flex: 0 0 auto; width: 100%; min-height: 0; background: var(--category-color,var(--budget)); }
.budget-month.is-selected .budget-month__stack { box-shadow: 0 0 0 1px color-mix(in srgb,var(--text),transparent 85%); }
.budget-month:not(.is-selected) .budget-month__stack { opacity: .86; }
.budget-month:hover .budget-month__stack { opacity: 1; }
.budget-month.is-selected .budget-month__label { color: var(--budget); }
.budget-history-range button[aria-pressed="false"] { background: transparent; color: var(--muted); box-shadow: none; }
.budget-category-analysis { display: grid; grid-template-columns: minmax(220px,.8fr) minmax(0,1.35fr); align-items: start; gap: clamp(24px,4vw,55px); }
.budget-category-donut { display: grid; align-content: start; justify-items: center; gap: 17px; padding: 22px 0; }
.budget-donut { position: relative; display: grid; place-items: center; width: min(100%,270px); aspect-ratio: 1; flex: 0 0 auto; border-radius: 50%; background: var(--surface-3); }
.budget-donut__hole { position: absolute; inset: 18%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 14px; border-radius: 50%; background: var(--surface); text-align: center; }
.budget-donut__total { color: var(--text); font: 740 clamp(21px,2.6vw,30px)/1.15 var(--font-display); letter-spacing: -.035em; white-space: nowrap; }
.budget-donut__label { max-width: 100%; color: var(--muted); font-size: 11px; line-height: 1.5; }
.budget-donut__caption { max-width: 290px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.7; text-align: center; }
.budget-category-analysis .budget-category-summary { margin-top: 0; }
.budget-anomaly-panel .budget-insight-list { grid-template-columns: repeat(3,minmax(0,1fr)); }
.budget-savings-plan { display: grid; gap: 10px; padding: 23px 24px; border: 1px solid color-mix(in srgb,var(--success),var(--line) 72%); border-radius: 15px; background: linear-gradient(115deg,var(--health-soft),var(--surface-2)); color: var(--text-soft); font-size: 12px; line-height: 1.7; }
.budget-savings-plan > strong,.budget-savings-plan__amount { display: block; color: var(--success); font: 740 clamp(25px,3vw,36px)/1.15 var(--font-display); letter-spacing: -.035em; }
.budget-savings-plan h4 { margin: 0; font-size: 14px; }
.budget-savings-plan p { margin: 0; color: var(--text-soft); font-size: 12px; line-height: 1.7; }
.budget-savings-plan small,.budget-savings-plan__note { color: var(--muted); font-size: 11px; line-height: 1.6; }
.budget-savings-scenario { display: grid; gap: 18px; margin: 24px 0; }
.budget-savings-scenario__intro h4 { margin: 0; color: var(--text); font-size: 16px; }
.budget-savings-scenario__intro p { margin: 7px 0 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.budget-plan-fields { grid-template-columns: repeat(2,minmax(0,1fr)); }
.budget-plan-fields label { align-content: start; }
.budget-plan-fields label small { color: var(--muted); font-size: 10px; font-weight: 400; line-height: 1.5; }
.budget-savings-scenario__result { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 14px; align-items: center; }
.budget-savings-scenario__result .budget-insight-card__action { align-self: center; margin: 0; padding: 12px 15px; }
.budget-savings-method { margin: 0 0 22px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.budget-savings-method > summary { padding: 15px 0; color: var(--text-soft); font-size: 11px; font-weight: 650; line-height: 1.6; cursor: pointer; }
.budget-savings-method > summary:focus-visible { outline: 2px solid var(--budget); outline-offset: 2px; }
.budget-savings-method > div { padding: 0 0 18px; color: var(--muted); font-size: 11px; line-height: 1.8; }
.budget-savings-method p { margin: 0 0 9px; }
.budget-savings-method ul { margin: 0; padding-left: 18px; }
.budget-insight-dialog__close { width: auto; min-width: 72px; height: 32px; padding: 7px 10px; border-radius: 8px; font-size: 11px; }
.budget-insight-dialog h3 { margin-right: 80px; }
.app.is-private .budget-overview .budget-donut { background: var(--surface-3) !important; }
@media (max-width: 1180px) {
  .budget-overview-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .budget-overview-kpi > strong { font-size: 29px; }
}
@media (max-width: 760px) {
  .budget-category-analysis { grid-template-columns: 1fr; gap: 10px; }
  .budget-category-donut { padding: 8px 0 20px; }
  .budget-donut { width: 235px; }
  .budget-donut__total { font-size: 27px; }
  .budget-anomaly-panel .budget-insight-list { grid-template-columns: 1fr; }
  .budget-plan-fields { grid-template-columns: 1fr; }
  .budget-savings-scenario__result { grid-template-columns: 1fr; }
  .budget-savings-scenario__result .budget-insight-card__action { justify-self: stretch; }
  .budget-savings-plan { padding: 19px; }
}
@media (max-width: 600px) {
  .budget-overview-kpis { grid-template-columns: 1fr; }
  .budget-overview-kpi { padding: 18px; }
  .budget-overview-kpi > strong { font-size: 25px; }
  .budget-overview-accounts__list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .budget-account-chip { display: grid; align-content: start; gap: 4px; padding: 10px; }
  .budget-monthly-context { display: grid; gap: 6px; }
}
.budget-account-strip { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; width: 100%; }
.budget-account-group { min-width: 0; padding: 15px 17px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); }
.budget-account-group h4 { margin: 0 0 11px; color: var(--text-soft); font-size: 11px; font-weight: 650; }
.budget-account-line { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 6px 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.budget-account-line > :first-child { min-width: 0; }
.budget-account-line > :last-child { flex: 0 0 auto; color: var(--text); font-weight: 650; }
.budget-plan-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.budget-plan-metrics > div { display: grid; align-content: start; gap: 9px; min-width: 0; }
.budget-plan-metrics small { color: var(--text-soft); font-size: 11px; line-height: 1.5; }
.budget-plan-metrics strong { color: var(--success); font: 740 clamp(21px,2.6vw,32px)/1.2 var(--font-display); letter-spacing: -.035em; }
.budget-plan-caution { margin: 4px 0 0; padding-top: 14px; border-top: 1px solid color-mix(in srgb,var(--success),var(--line) 82%); color: var(--muted); font-size: 11px; line-height: 1.7; }
#budgetSavingsMethodBody .budget-plan-component { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 7px 0; border-bottom: 1px solid var(--line); }
#budgetSavingsMethodBody .budget-plan-component:last-child { border-bottom: 0; }
#budgetSavingsMethodBody .budget-plan-component strong { color: var(--text-soft); white-space: nowrap; }
@media (max-width: 760px) {
  .budget-plan-metrics { grid-template-columns: 1fr; gap: 15px; }
  .budget-plan-metrics > div { grid-template-columns: minmax(0,1fr) auto; align-items: baseline; gap: 12px; }
  .budget-plan-metrics strong { font-size: 24px; }
}
@media (max-width: 600px) {
  .budget-overview-accounts__list { display: block; }
  .budget-account-strip { grid-template-columns: 1fr; gap: 8px; }
  .budget-history-range { width: 100%; }
  .budget-history-range button { flex: 1; padding: 7px 9px; }
}

.budget-plan-component-note { display: block; max-width: 580px; margin-top: 3px; color: var(--muted); font-size: 10px; font-weight: 400; line-height: 1.5; }
.budget-donut__share { color: var(--muted); font-size: 10px; line-height: 1.4; }

/* Income and spending share the same scale and selected month. */
.budget-overview-kpis { grid-template-columns: repeat(3,minmax(0,1fr)); }
.budget-overview-kpi--income { background: linear-gradient(135deg,var(--health-soft),var(--surface) 90%); }
.budget-overview-kpi--income > strong,.budget-overview-kpi > strong[data-tone="positive"] { color: var(--success); }
.budget-overview-kpi > strong[data-tone="negative"] { color: var(--warning); }
.budget-months { grid-auto-columns: minmax(105px,1fr); }
.budget-month { min-width: 105px; }
.budget-month__amount-pair { display: grid; gap: 4px; }
.budget-month__amount-pair > * { font-size: 11px; line-height: 1.3; font-weight: 650; }
.budget-month__income-amount { color: var(--success); }
.budget-month__plot-pair { flex-direction: row; align-items: flex-end; justify-content: center; gap: 7px; }
.budget-month__lane { display: flex; flex: 0 1 34px; flex-direction: column-reverse; align-items: stretch; height: 100%; }
.budget-month__lane > :is(.budget-month__stack,.budget-month__forecast) { width: 100%; }
.budget-month__income { display: block; flex: 0 0 auto; width: 100%; border-radius: 5px 5px 0 0; background: var(--success); }
.budget-chart-legend-chip .budget-income-legend { background: var(--success); }
.budget-income-details { margin-top: -7px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.budget-income-details > summary { padding: 14px 17px; color: var(--text-soft); font-size: 11px; font-weight: 650; cursor: pointer; }
.budget-income-details > summary:focus-visible { outline: 2px solid var(--budget); outline-offset: -2px; border-radius: 12px; }
.budget-income-breakdown { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 15px; padding: 3px 17px 16px; }
.budget-income-breakdown > div { display: grid; gap: 7px; align-content: start; min-width: 0; }
.budget-income-breakdown span { color: var(--muted); font-size: 10px; line-height: 1.5; }
.budget-income-breakdown strong { color: var(--text); font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
.budget-income-details > p { margin: 0; padding: 0 17px 16px; color: var(--muted); font-size: 10px; line-height: 1.7; }
@media (max-width:1180px) { .budget-overview-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width:760px) { .budget-income-breakdown { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width:600px) { .budget-overview-kpis { grid-template-columns: 1fr; } }

/* The operation period belongs to the content, directly before the monthly chart. */
.budget-period-panel { display: flex; align-items: center; justify-content: space-between; gap: 18px 24px; padding: 19px 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.budget-period-panel__context { display: grid; min-width: 0; gap: 6px; }
.budget-period-panel .budget-overview-kicker { margin: 0; }
.budget-period-panel #budgetSelectedMonth { font-size: 16px; line-height: 1.4; }
.budget-period-panel #budgetPeriodCoverage { text-align: left; }
.budget-period-panel .budget-history-range { margin: 0; }
@media (max-width:760px) {
  .budget-period-panel { flex-direction: column; align-items: stretch; gap: 15px; padding: 18px 16px; }
  .budget-period-panel .budget-history-range { width: 100%; }
  .budget-period-panel .budget-history-range button { flex: 1; }
}

/* Compact category legend; explicitly override the legacy fixed donut height. */
.budget-category-panel .budget-category-analysis { grid-template-columns: minmax(190px,.7fr) minmax(0,1.5fr); align-items: center; gap: 28px; }
.budget-category-panel .budget-category-donut { min-width: 0; padding: 4px 0; gap: 10px; }
.budget-category-panel .budget-donut { width: min(100%,240px); height: auto; min-height: 0; aspect-ratio: 1 / 1; box-sizing: border-box; align-self: start; }
.budget-category-panel .budget-donut__hole { inset: 16%; padding: 10px; gap: 5px; }
.budget-category-panel .budget-donut__total { font-size: clamp(19px,2vw,25px); }
.budget-category-panel .budget-donut__label { font-size: 10px; }
.budget-category-panel .budget-donut__caption { font-size: 10px; line-height: 1.4; }
.budget-category-panel .budget-category-list { gap: 0; }
.budget-category-panel .budget-category { grid-template-columns: 28px minmax(0,1fr) auto 46px; gap: 10px; min-height: 44px; padding: 8px 6px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.budget-category-panel .budget-category:hover { border-radius: 8px; }
.budget-category-panel .budget-category__emoji { width: 28px; height: 28px; margin: 0; align-self: center; border-radius: 8px; font-size: 18px; }
.budget-category__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; line-height: 1.5; }
.budget-category__amount { white-space: nowrap; text-align: right; font-size: 12px; font-weight: 700; }
.budget-category__percent { white-space: nowrap; text-align: right; color: var(--muted); font-size: 10px; }
.budget-category-panel .budget-category-toggle { min-height: 34px; margin-top: 8px; padding: 7px 10px; background: transparent; border-color: transparent; }
@media (max-width: 760px) {
  .budget-category-panel .budget-category-analysis { grid-template-columns: 1fr; gap: 18px; }
  .budget-category-panel .budget-donut { width: min(100%,220px); }
  .budget-category-panel .budget-category { gap: 8px; }
}
@media (max-width: 420px) {
  .budget-category-panel .budget-category { grid-template-columns: 24px minmax(0,1fr) auto 39px; gap: 6px; padding-inline: 0; }
  .budget-category-panel .budget-category__emoji { width: 24px; height: 24px; font-size: 16px; }
  .budget-category__name,.budget-category__amount { font-size: 11px; }
}

.budget-month-tooltip { position: fixed; inset: auto; top: 0; left: 0; margin: 0; z-index: 1500; width: min(370px,calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--text); box-shadow: 0 8px 24px rgba(0,0,0,.10),0 24px 64px rgba(0,0,0,.12); font: 12px/1.5 var(--font-sans); }
.budget-month-tooltip[hidden] { display: none !important; }
.budget-month-tooltip__heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.budget-month-tooltip__heading > div { display: grid; gap: 3px; }
.budget-month-tooltip__heading small { color: var(--muted); font-size: 10px; }
.budget-month-tooltip__heading b { font-size: 16px; font-weight: 700; text-transform: capitalize; letter-spacing: -.02em; }
.budget-month-tooltip__heading button { display: grid; place-items: center; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: var(--surface-2); color: var(--muted); font: 22px/1 var(--font-sans); }
.budget-month-tooltip__heading button:hover { background: var(--surface-3); color: var(--text); }
.budget-month-tooltip__totals { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.budget-month-tooltip__totals > div { display: grid; align-content: start; gap: 6px; min-width: 0; padding: 12px; border-radius: 11px; background: var(--surface-2); }
.budget-month-tooltip__totals span { color: var(--muted); font-size: 10px; }
.budget-month-tooltip__totals strong { font-size: clamp(15px,3.8vw,19px); font-weight: 720; letter-spacing: -.025em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.budget-month-tooltip__totals .is-income { color: var(--success); }
.budget-month-tooltip__list-label { margin: 18px 0 6px; color: var(--muted); font-size: 10px; font-weight: 650; }
.budget-month-tooltip__categories { max-height: min(280px,42dvh); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.budget-month-tooltip__row { display: grid; grid-template-columns: 26px minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.budget-month-tooltip__row:last-child { border-bottom: 0; }
.budget-month-tooltip__emoji { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: color-mix(in srgb,var(--tip-category-color),var(--surface) 90%); font-size: 15px; }
.budget-month-tooltip__name { color: var(--text-soft); font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; }
.budget-month-tooltip__row strong { white-space: nowrap; text-align: right; font-size: 11px; font-weight: 650; font-variant-numeric: tabular-nums; }
.budget-month-tooltip__empty { margin: 12px 0; color: var(--muted); font-size: 11px; }
.budget-month-tooltip__footer { display: grid; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; }
.budget-month-tooltip__footer > span { display: flex; justify-content: space-between; gap: 12px; }
.budget-month-tooltip__footer b { color: var(--text-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
.budget-month-tooltip__footer small { font-size: 10px; }
.budget-month-tooltip button:focus-visible { outline: 2px solid var(--budget); outline-offset: 2px; }
@media (max-width: 380px) { .budget-month-tooltip { padding: 14px; } .budget-month-tooltip__row { gap: 7px; } }

.budget-savings-brief .budget-savings-grid { display: grid; grid-template-columns: 1fr; gap: 0; }
.budget-saving-row { display: grid; grid-template-columns: 32px minmax(0,1fr) auto 12px; align-items: center; gap: 14px; padding: 14px 4px; border-bottom: 1px solid var(--line); background: transparent; color: var(--text); text-align: left; }
.budget-saving-row:hover { background: var(--surface-2); }
.budget-saving-row__emoji { font-size: 23px; }
.budget-saving-row__copy,.budget-saving-row__benefit { display: grid; gap: 5px; }
.budget-saving-row__copy b { font-size: 13px; font-weight: 650; }
.budget-saving-row small { color: var(--muted); font-size: 11px; line-height: 1.5; }
.budget-saving-row__benefit { text-align: right; }
.budget-saving-row__benefit strong { white-space: nowrap; color: var(--success); font-size: 18px; }
.budget-saving-row__arrow { color: var(--muted); font-size: 22px; }
.budget-saving-note,.budget-saving-empty { margin: 12px 0 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.budget-savings-extra { margin-top: 16px; }
.budget-savings-extra > summary { width: fit-content; cursor: pointer; color: var(--budget); font-size: 11px; font-weight: 650; }
.budget-savings-extra > div { padding-top: 18px; }
.budget-saving-row:focus-visible,.budget-savings-extra > summary:focus-visible { outline: 2px solid var(--budget); outline-offset: 2px; }
@media (max-width: 600px) {
 .budget-saving-row { grid-template-columns: 26px minmax(0,1fr) 12px; gap: 9px; }
 .budget-saving-row__emoji { font-size: 20px; }
 .budget-saving-row__benefit { grid-column: 2; text-align: left; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
 .budget-saving-row__arrow { grid-column: 3; grid-row: 1 / 3; }
 .budget-saving-row__benefit strong { font-size: 16px; }
}