.filters { transition: opacity .2s; }
.filters.loading { opacity: .55; pointer-events: none; }
.pie { display: none; }
.species-panel, .daily-panel { min-width: 0; overflow: hidden; }
.pie-wrap { gap: 14px; align-items: center; }
.donut-stage { width: 175px; height: 175px; max-width: 46%; position: relative; flex: none; }
.donut-stage canvas { display: block; width: 100% !important; height: 100% !important; }
.donut-total { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; pointer-events: none; color: #475d63; }
.donut-total.hidden { display: none; }
.donut-total strong { font-size: 19px; }
.donut-total span { font-size: 11px; color: #849499; }
.legend { min-width: 0; white-space: normal; }
.legend li { display: grid; grid-template-columns: 9px minmax(62px, 1fr) auto; align-items: center; gap: 5px; margin: 4px 0; }
.legend i { width: 9px; height: 9px; border-radius: 2px; margin: 0; }
.legend span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legend strong { font-weight: 700; white-space: nowrap; }
.chart-frame { position: relative; width: 100%; height: 270px; overflow: visible; }
.chart-frame-bars { height: 285px; }
.chart-frame canvas { display: block; width: 100% !important; height: 100% !important; }
.bars { display: none; }
.data-alert { position: fixed; right: 20px; bottom: 20px; z-index: 20; background: #fff0ef; color: #a72e27; border: 1px solid #efb7b2; border-radius: 8px; padding: 12px 18px; box-shadow: 0 8px 24px rgba(0,0,0,.16); }
.data-card { min-width: 0; align-self: start; }
.data-card h2 { min-height: 44px; margin: 0; display: flex; align-items: flex-end; padding-bottom: 9px; line-height: 1.2; }
.data-table-wrap { height: 178px; overflow: auto; scrollbar-width: thin; scrollbar-color: #9cb8bd transparent; }
.data-card table { table-layout: auto; }
.data-card thead { position: sticky; top: 0; z-index: 1; }
.data-card th { height: 29px; white-space: nowrap; }
.data-card td { height: 23px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.data-card td:first-child { max-width: 150px; }
.data-card tbody tr:nth-child(even) { background: #f5f9f9; }
.data-card .empty-cell { text-align: center !important; color: #7f8e92; padding: 16px 4px; }

@media (max-width: 760px) {
  .pie-wrap { flex-direction: column; align-items: stretch; }
  .donut-stage { align-self: center; width: min(190px, 62vw); height: min(190px, 62vw); max-width: none; }
  .legend { font-size: 12px; }
  .data-table-wrap { height: auto; max-height: 210px; }
}