.filter-area {
  margin-bottom: var(--space-5);
  position: relative;
}

.filter-button {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-weight: 750;
  min-height: 42px;
  padding: var(--space-2) var(--space-4);
}

.filter-dropdown {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 42px var(--color-shadow);
  display: none;
  gap: var(--space-4);
  grid-template-columns: repeat(3, minmax(130px, 1fr));
  margin-top: var(--space-2);
  padding: var(--space-4);
  position: absolute;
  right: 0;
  width: min(760px, calc(100vw - 2rem));
  z-index: 10;
}

.filter-dropdown.is-open {
  display: grid;
}

.filter-group {
  border: 0;
  display: grid;
  gap: var(--space-2);
}

.filter-group legend {
  color: var(--color-text);
  font-weight: 800;
  margin-bottom: var(--space-1);
}

.filter-option {
  align-items: center;
  color: var(--color-text-muted);
  display: flex;
  gap: var(--space-2);
}