.filter-bar {
  background: linear-gradient(180deg, #f8fafc, #ffffff);
  border: 1px solid var(--c-border); border-radius: 12px;
  padding: 1rem 1.1rem; margin-bottom: 1.1rem;
  display: flex; flex-direction: column; gap: .75rem;
}
.filter-bar__main { display: flex; gap: .55rem; align-items: stretch; flex-wrap: wrap; }
.filter-bar__main input[type="search"] {
  flex: 1 1 280px; padding: .7rem .95rem; font-size: 1rem;
  border: 1px solid var(--c-border); border-radius: 8px; background: white;
  transition: border-color .12s, box-shadow .12s;
}
.filter-bar__main input[type="search"]:focus {
  border-color: var(--c-accent); outline: 0;
  box-shadow: 0 0 0 3px rgba(30,64,175,.15);
}
.filter-bar__row { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.filter-bar__row .meta-label { color: var(--c-muted); font-size: .8rem; margin-right: .15rem; }

.filter-pill {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .75rem; background: white; border: 1px solid var(--c-border);
  border-radius: 999px; font-size: .82rem; cursor: pointer;
  transition: all .12s; user-select: none; line-height: 1;
}
.filter-pill input[type="checkbox"] { margin: 0; accent-color: var(--c-accent); }
.filter-pill:hover { border-color: var(--c-accent); color: var(--c-accent); }
.filter-pill:has(input:checked) {
  background: var(--c-accent); color: white; border-color: var(--c-accent);
}

select.filter-select {
  padding: .45rem .7rem; padding-right: 1.8rem; border: 1px solid var(--c-border);
  border-radius: 999px; background: white; font-size: .82rem; cursor: pointer;
  font-family: inherit; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%2364748b' d='M6 8L0 0h12z'/></svg>");
  background-repeat: no-repeat; background-position: right .65rem center;
  transition: border-color .12s, box-shadow .12s;
}
select.filter-select:hover { border-color: var(--c-accent); }
select.filter-select:focus { outline: 0; border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(30,64,175,.15); }
select.filter-select.has-value {
  background-color: var(--c-accent); color: white; border-color: var(--c-accent);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='white' d='M6 8L0 0h12z'/></svg>");
  font-weight: 500;
}

.filter-details { position: relative; }
.filter-details > summary {
  list-style: none; cursor: pointer; padding: .45rem .85rem;
  background: white; border: 1px solid var(--c-border); border-radius: 999px;
  font-size: .82rem; display: inline-flex; align-items: center; gap: .35rem;
  transition: all .12s;
}
.filter-details > summary::-webkit-details-marker,
.filter-details > summary::marker { display: none; content: ""; }
.filter-details > summary::after { content: "▾"; color: var(--c-muted); font-size: .65rem; }
.filter-details > summary:hover { border-color: var(--c-accent); color: var(--c-accent); }
.filter-details[open] > summary {
  background: var(--c-accent); color: white; border-color: var(--c-accent);
}
.filter-details[open] > summary::after { color: white; }
.filter-details.has-value > summary {
  background: var(--c-accent); color: white; border-color: var(--c-accent);
}
.filter-details.has-value > summary::after { color: white; }
.filter-count {
  background: rgba(255,255,255,.28); color: inherit;
  padding: .05rem .4rem; border-radius: 999px; font-size: .7rem; font-weight: 600;
}
.filter-details .popover {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 50;
  min-width: 260px; max-width: 380px;
  background: white; border: 1px solid var(--c-border); border-radius: 10px;
  box-shadow: 0 14px 30px rgba(15,23,42,.18);
  padding: .75rem;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: .25rem;
}
.filter-details .popover label {
  display: flex; align-items: center; gap: .3rem; padding: .3rem .4rem;
  border-radius: 5px; font-size: .8rem; cursor: pointer;
}
.filter-details .popover label:hover { background: #f1f5f9; }
.filter-details .popover label:has(input:checked) {
  background: rgba(30,64,175,.1); color: var(--c-accent); font-weight: 500;
}
.filter-details .popover input[type="checkbox"] { accent-color: var(--c-accent); }

.filter-clear {
  background: transparent; border: 0; color: var(--c-muted);
  font-size: .82rem; cursor: pointer; padding: .4rem .6rem; margin-left: auto;
  text-decoration: underline; font-family: inherit;
}
.filter-clear:hover { color: var(--c-error); }