.history-section { overflow: hidden; }
.history-heading { display: flex; justify-content: space-between; align-items: end; gap: 18px; margin-bottom: 16px; }
.history-heading h2 { margin-top: 4px; font-size: 24px; letter-spacing: -.02em; }
.history-controls { display: flex; gap: 10px; flex-wrap: wrap; }
.history-controls label { display: grid; gap: 5px; font-size: 11px; color: #777169; text-transform: uppercase; letter-spacing: .06em; }
.history-controls select { min-width: 145px; border: 1px solid #ddd5ca; border-radius: 10px; padding: 9px 10px; background: #fff; color: #282521; text-transform: none; letter-spacing: normal; }
.history-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.history-stat { background: #f8f5f0; border: 1px solid #eee7dc; border-radius: 14px; padding: 13px 14px; }
.history-stat-value { margin-top: 5px; font-size: 21px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.history-chart-wrap { border: 1px solid #eee7dc; border-radius: 16px; padding: 12px 10px 4px; overflow-x: auto; background: #fff; }
.history-chart-wrap > svg ~ .muted, .history-chart-wrap > .empty ~ .muted { display: none; }
.history-chart { display: block; width: 100%; min-width: 0; height: auto; }
.history-chart.history-chart-long { min-width: 900px; }
.history-grid-line { stroke: #eee8df; stroke-width: 1; }
.history-expense-bar { fill: #caa38e; opacity: .82; }
.history-income-line { fill: none; stroke: #547a67; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.history-income-dot { fill: #547a67; }
.history-axis-label { fill: #8b857c; font-size: 10px; }
.history-legend { display: flex; gap: 16px; align-items: center; margin: 10px 4px 4px; color: #777169; font-size: 12px; }
.history-legend span { display: inline-flex; gap: 6px; align-items: center; }
.legend-swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.legend-expense { background: #caa38e; }
.legend-income { background: #547a67; border-radius: 999px; height: 3px; width: 14px; }
.history-lower { margin-top: 22px; }
.history-category-composition { display: block; }
.history-category-composition > div:first-child { text-align: left; }
.history-subtitle { font-weight: 700; margin-bottom: 8px; }
.history-category-composition > div:first-child .history-subtitle { font-size: 18px; margin-bottom: 4px; }
.history-donut-wrap { display: flex; justify-content: center; min-height: 320px; margin: 4px auto 18px; }
.history-category-composition .history-donut { width: min(100%, 340px); }
.history-category-details { margin-top: 4px; }
.history-category-details > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; width: fit-content; padding: 8px 12px; border: 1px solid #e4ddd4; border-radius: 999px; background: #f8f5f0; color: #655f58; font-size: 11px; font-weight: 700; user-select: none; transition: background .15s ease, border-color .15s ease; }
.history-category-details > summary:hover { background: #f3eee7; border-color: #d9d0c5; }
.history-category-details > summary::-webkit-details-marker { display: none; }
.history-category-details > summary::after { content: '›'; color: #8d877f; font-size: 16px; line-height: 1; transform: rotate(90deg); transition: transform .15s ease; }
.history-category-details[open] > summary::after { transform: rotate(-90deg); }
.history-category-details[open] > summary { margin-bottom: 12px; background: #f5f1eb; }
.history-category-list { column-count: 2; column-gap: 42px; column-fill: balance; padding: 4px 0 6px; }
.history-breakdown-group { min-width: 0; break-inside: avoid; page-break-inside: avoid; }
.history-donut { display: block; width: min(100%, 250px); height: auto; overflow: visible; }
.history-donut-slice { transition: opacity .15s ease; }
.history-donut-slice:hover { opacity: .82; }
.history-donut-percent { fill: #fff; font-size: 10px; font-weight: 800; paint-order: stroke; stroke: rgba(0,0,0,.18); stroke-width: .9px; pointer-events: none; }
.history-donut-total { fill: #282521; font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.history-donut-caption { fill: #8b857c; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.history-breakdown-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 48px; gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid #f1ece5; font-size: 13px; }
.history-breakdown-name { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.history-breakdown-name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-breakdown-swatch { width: 9px; height: 9px; border-radius: 999px; flex: 0 0 9px; }
.history-other-hint { display: inline-flex; align-items: center; border-radius: 999px; padding: 2px 6px; background: #f1eee9; color: #8a847c; font-size: 9px; line-height: 1.2; }
.history-category-amount { font-variant-numeric: tabular-nums; text-align: right; }
.history-breakdown-percent { font-variant-numeric: tabular-nums; text-align: right; color: #777169; }
.history-error { min-height: 18px; margin-top: 8px; color: #a1483f; font-size: 13px; }
@media (max-width: 800px) {
  .history-heading { align-items: flex-start; flex-direction: column; }
  .history-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .history-category-list { column-count: 2; column-gap: 24px; }
}
@media (max-width: 480px) {
  .history-summary { grid-template-columns: 1fr; }
  .history-controls { width: 100%; }
  .history-controls label, .history-controls select { width: 100%; }
  .history-donut-wrap { min-height: 280px; margin-bottom: 14px; }
  .history-category-composition .history-donut { width: min(100%, 300px); }
  .history-category-list { column-count: 1; }
  .history-breakdown-row { grid-template-columns: minmax(0, 1fr) auto 44px; }
}