.monthly-trend { min-width: 0; margin-bottom: 18px; overflow: hidden; }
.monthly-trend-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 20px 20px 12px; }
.monthly-trend-header h3 { margin: 0; color: var(--ink); font-size: 16px; }
.monthly-trend-header p { margin: 6px 0 0; color: var(--muted); font-size: 12px; }
.monthly-trend-selected { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; text-align: right; }
.monthly-trend-selected strong { color: var(--ink); font-size: 25px; font-variant-numeric: tabular-nums; }
.monthly-trend-selected span { color: var(--muted); font-size: 12px; }
.monthly-trend-controls { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 20px 12px; }
.monthly-trend-controls button { min-height: 44px; padding: 8px 13px; border: 1px solid var(--control-border); border-radius: 7px; background: white; color: var(--ink); font: inherit; font-size: 12px; cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
.monthly-trend-controls button:hover { background: var(--panel-soft); }
.monthly-trend-controls button[aria-pressed="true"] { background: var(--brand-primary); border-color: var(--brand-primary); color: white; }
.monthly-trend-controls button:focus-visible, .monthly-trend-chart:focus-visible, .monthly-trend-values summary:focus-visible { outline: 3px solid var(--brand-primary); outline-offset: 3px; }
.monthly-trend-chart { width: 100%; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; }
.monthly-trend-chart svg { display: block; width: 100%; max-width: none; font-family: inherit; }
.monthly-trend-guide line { stroke: var(--line, var(--line)); stroke-width: 1; }
.monthly-trend-guide text, .monthly-trend-month { fill: var(--muted, var(--muted)); font-size: 12px; }
.monthly-trend-value { fill: var(--ink, var(--brand-primary)); font-size: 12px; font-variant-numeric: tabular-nums; }
.monthly-trend-baseline { stroke: var(--brand-accent); stroke-width: 1; }
.monthly-trend-bar { fill: var(--brand-secondary); stroke: var(--brand-secondary); stroke-width: 1; opacity: .8; }
.monthly-trend-bar.is-partial { fill: var(--brand-accent); stroke: var(--brand-secondary); stroke-width: 1; stroke-dasharray: 4 2; }
.monthly-trend-bar.is-selected { fill: var(--brand-primary); opacity: 1; }
.monthly-trend-bar.is-partial.is-selected { fill: var(--brand-accent); }
.monthly-trend-month.is-selected { fill: var(--ink, var(--brand-primary)); font-weight: 700; }
.monthly-trend-missing { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 4 3; }
.monthly-trend-caption { margin: 0; padding: 4px 20px 16px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.monthly-trend-values { border-top: 1px solid var(--line); }
.monthly-trend-values summary { padding: 14px 20px; color: var(--ink); font-size: 12px; font-weight: 600; cursor: pointer; }
.monthly-trend-values table { width: 100%; }
.monthly-trend-values th, .monthly-trend-values td { padding: 11px 20px; font-size: 12px; text-align: left; }
.monthly-trend-values tbody th { color: var(--ink); font-weight: 500; text-transform: none; }
.monthly-trend-values tbody td:nth-child(2) { font-variant-numeric: tabular-nums; font-weight: 600; }
.monthly-trend-values small { display: block; max-width: 560px; margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.5; white-space: normal; }
@media (max-width: 600px) {
  .monthly-trend-header { gap: 12px; padding: 16px 16px 12px; }
  .monthly-trend-header h3 { font-size: 15px; }
  .monthly-trend-selected strong { font-size: 21px; }
  .monthly-trend-selected span { max-width: 115px; }
  .monthly-trend-controls { padding: 0 16px 12px; }
  .monthly-trend-caption { padding-left: 16px; padding-right: 16px; }
  .monthly-trend-values summary { padding-left: 16px; padding-right: 16px; }
  .monthly-trend-values th, .monthly-trend-values td { padding: 10px 16px; }
}
@media (prefers-reduced-motion: reduce) { .monthly-trend-controls button { transition: none; } }