.consumption-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 16px; margin: 0 0 16px; }
.consumption-filters .field { margin: 0; }
.consumption-filters .text-link { padding: 12px 0; }
.consumption-table-wrap { overflow-x: auto; margin: 24px 0; }
.consumption-table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.consumption-table caption { text-align: left; color: #666; margin-bottom: 14px; }
.consumption-table th, .consumption-table td { padding: 14px 10px; text-align: left; vertical-align: top; border-bottom: 1px solid #dedede; }
.consumption-table th { background: var(--surface); font-weight: 600; }
.consumption-table td { min-width: 100px; }
.consumption-table td:last-child { min-width: 220px; }
.consumption-table td:first-child { min-width: 155px; }
.consumption-table td:nth-child(2) { min-width: 165px; }
.consumption-table td span, .consumption-table time { display: block; color: #666; font-size: 11px; line-height: 1.6; margin-top: 5px; overflow-wrap: anywhere; }
.consumption-table details { margin-top: 8px; max-width: 210px; }
.consumption-table summary { cursor: pointer; text-decoration: underline; }
.consumption-cost { white-space: nowrap; }
.consumption-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px; margin-top: 24px; font-size: 12px; }
@media (max-width: 600px) { .consumption-filters .field { width: 100%; } }