.monthly-hint { text-align: center; font-size: 11px; color: var(--c-text3); font-style: italic; margin-bottom: 16px; }
.monthly-list { display: flex; flex-direction: column; gap: 9px; }
.month-card { border-radius: 14px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,.05); transition: background .2s, border-color .2s; }
.month-header { display: flex; align-items: center; gap: 13px; padding: 13px 16px; }
.month-num-badge { width: 31px; height: 31px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; background: var(--c-bg5); color: var(--c-text3); border: 2px solid var(--c-border); }
.month-num-badge.done { background: var(--c-her); color: #fff; border-color: var(--c-her); }
.month-meta { flex: 1; min-width: 0; }
.month-name { font-weight: 700; font-size: 14px; color: var(--c-his); }
.month-sub { font-size: 10px; color: var(--c-text3); margin-top: 1px; }
.month-right-col { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0; }
.month-total { font-family: 'Playfair Display', Georgia, serif; font-size: 15px; font-weight: 700; white-space: nowrap; }
.month-done-toggle { font-size: 9px; font-weight: 700; padding: 3px 9px; border-radius: 8px; border: 1.5px solid var(--c-border); background: var(--c-bg); color: var(--c-text3); cursor: pointer; white-space: nowrap; transition: all .15s; }
.month-done-toggle.done { background: #d1e7dd; border-color: #a3cfbb; color: #0f5132; }
.month-done-toggle:hover { border-color: var(--c-her); color: var(--c-her); }
.month-mini-bars { padding: 0 16px 12px; display: flex; gap: 8px; }

.month-header-clickable { cursor: pointer; user-select: none; }
.month-header-clickable:hover { background: var(--c-bg3); }
.month-chevron { font-size: 9px; color: var(--c-text3); flex-shrink: 0; width: 12px; }

.month-detail { overflow: hidden; max-height: 0; transition: max-height .3s ease; }
.month-detail.open { max-height: 600px; }

.month-detail-table-wrap { overflow-x: auto; border-top: 1px solid var(--c-border); }
.month-detail-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.month-detail-table thead th { padding: 7px 12px; background: var(--c-bg2); color: var(--c-text3); font-size: 9px; text-transform: uppercase; letter-spacing: 0.8px; font-weight: 700; border-bottom: 1px solid var(--c-border); text-align: left; white-space: nowrap; }
.month-detail-row td { padding: 8px 12px; border-bottom: 1px solid var(--c-bg3); vertical-align: middle; }
.month-detail-row:last-child td { border-bottom: none; }
.month-detail-person { font-weight: 700; white-space: nowrap; }
.month-detail-date { color: var(--c-text2); white-space: nowrap; }
.month-detail-amount { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; white-space: nowrap; text-align: right; }
.month-detail-wallet { color: var(--c-text2); font-size: 10px; white-space: nowrap; }
.month-detail-note { color: var(--c-text3); font-style: italic; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.month-detail-empty { padding: 12px 16px; font-size: 11px; color: var(--c-text3); font-style: italic; border-top: 1px solid var(--c-border); }

@media (max-width: 480px) {
  .month-detail-hide-mobile { display: none; }
}