.page-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.page-title h1 { margin-bottom: 4px; }
.filter-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(2, minmax(150px, 1fr));
  gap: 16px;
  align-items: end;
  margin: 22px 0 20px;
  padding: 20px;
  border: 1px solid #e1e6ee;
  border-radius: 13px;
  background: linear-gradient(145deg, #fbfcfd, #f7f8fa);
}
.filter-grid > div { display: flex; min-width: 0; flex-direction: column; }
.filter-grid label { display: flex; align-items: center; min-height: 20px; margin: 0 0 7px; line-height: 1.2; }
.filter-grid input, .filter-grid select { height: 44px; min-height: 44px; }
.filter-wide { grid-column: auto; }
.filter-actions { display: flex !important; flex-direction: row !important; align-items: flex-end; justify-content: flex-start; gap: 10px; }
.filter-actions .button, .filter-actions button { flex: 1 1 0; min-width: 90px; height: 44px; min-height: 44px; margin: 0; white-space: nowrap; }
.report-filter { grid-template-columns: repeat(3, minmax(160px, 1fr)) minmax(200px, 1.15fr); max-width: 960px; }
.stats-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 20px; }
.stat-card { background: linear-gradient(145deg, #fff, #f5f7fb); border: 1px solid #e2e6ed; border-radius: 12px; padding: 18px; box-shadow: 0 2px 10px #0000000c; }
.stat-card span { display: block; color: #687386; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.stat-card strong { display: block; margin-top: 8px; font-size: 25px; color: #172033; }
.report-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.bar-chart { display: grid; gap: 12px; }
.bar-row { display: grid; grid-template-columns: 90px minmax(120px, 1fr) 180px; gap: 12px; align-items: center; }
.bar-label { font-size: 13px; font-weight: 700; }
.bar-track { height: 13px; background: #eceff4; border-radius: 99px; overflow: hidden; }
.bar-fill { height: 100%; background: linear-gradient(90deg, #9d1824, #c4a55b); border-radius: 99px; }
.bar-value { text-align: right; font-variant-numeric: tabular-nums; }
.bar-value small { color: #687386; }
@media (min-width: 1101px) {
  .filter-grid:not(.report-filter) { grid-template-columns: minmax(300px, 2fr) repeat(3, minmax(145px, 1fr)); }
  .filter-grid:not(.report-filter) .filter-wide { grid-column: span 2; }
  .filter-grid:not(.report-filter) .filter-actions { grid-column: auto; }
}
@media (max-width: 1100px) {
  .filter-grid, .report-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
  .filter-wide { grid-column: span 2; }
  .filter-actions, .report-filter .filter-actions { grid-column: span 2; }
}
@media (max-width: 950px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .report-columns { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .filter-grid, .report-filter { grid-template-columns: 1fr; gap: 13px; padding: 15px; }
  .filter-wide, .filter-actions, .report-filter .filter-actions { grid-column: auto; }
  .filter-actions { width: 100%; }
  .stats-grid { grid-template-columns: 1fr; }
  .bar-row { grid-template-columns: 72px 1fr; }
  .bar-value { grid-column: 2; text-align: left; }
}