/* gallery.css */
.filter-bar-section { background: var(--color-surface); padding: 1.5rem 0; border-bottom: 1px solid var(--color-border); }
.filter-bar { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.filter-pills { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.filter-pill {
  padding: 0.5rem 1.25rem;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-border);
  background: #fff;
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: all var(--transition-normal);
  color: var(--color-text-muted);
}
.filter-pill:hover, .filter-pill.active {
  background: var(--gradient-primary);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 12px rgba(170,129,207,0.3);
}
.filter-search input {
  padding: 0.5rem 1rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  min-width: 200px;
  transition: border-color var(--transition-fast);
  background: #fff;
}
.filter-search input:focus { outline: none; border-color: var(--color-primary); }
.filter-count { margin-left: auto; font-size: var(--text-sm); color: var(--color-text-muted); white-space: nowrap; }
.gallery-section { background: #fff; }
@media(max-width:640px) { .filter-bar { flex-direction: column; align-items: flex-start; } .filter-count { margin-left: 0; } }