/* Catalog controls share one aligned, responsive surface in both themes. */
.uniparts-catalog .uniparts-toolbar {
  display: grid;
  grid-template-columns: minmax(220px,1fr) minmax(210px,.8fr) 150px auto;
  align-items: end;
  gap: 12px 14px;
  margin: 24px 0 22px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.uniparts-toolbar .search,
.uniparts-toolbar .unipart-effect-control,
.uniparts-toolbar .card-size-control {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
  min-width: 0;
  max-width: none;
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
}
.uniparts-toolbar .search > .sr-only {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
}
.uniparts-toolbar .search > svg {
  top: auto;
  bottom: 14px;
  transform: none;
  left: 13px;
  width: 16px;
  height: 16px;
  pointer-events: none;
  color: var(--muted);
}
.uniparts-toolbar .search input,
.uniparts-toolbar .unipart-effect-control select,
.uniparts-toolbar .card-size-control select,
.uniparts-toolbar .unipart-filter-reset {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: none;
  height: 44px;
  min-height: 44px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--field-bg);
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}
.uniparts-toolbar .search input { padding-left: 39px; }
.uniparts-toolbar .unipart-effect-control select,
.uniparts-toolbar .card-size-control select { padding-right: 30px; cursor: pointer; }
.uniparts-toolbar .unipart-filter-reset {
  width: auto;
  padding-inline: 15px;
  white-space: nowrap;
  cursor: pointer;
  font-weight: 650;
  background: var(--surface-muted);
}
.uniparts-toolbar :is(input,select,button):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.uniparts-toolbar .unipart-filter-reset:hover {
  border-color: var(--accent);
  color: var(--accent-strong);
  background: var(--soft-accent);
}
.uniparts-toolbar .unipart-result-count {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: 11px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--muted);
}
/* Set-effect matches are separate from generic individual-part rolls. */
.unipart-filter-match{margin:2px 0 15px;padding:11px 12px;border-left:3px solid var(--accent);border-radius:0 7px 7px 0;background:var(--soft-accent);color:var(--text)}
.unipart-match-label{display:block;font-size:10px;font-weight:800;line-height:1.5;color:var(--accent-strong)}
.unipart-card .unipart-filter-match p{display:block;margin:7px 0 0;font-size:11px;line-height:1.6;color:var(--text);overflow:visible}
.unipart-filter-match small{display:block;font-size:10px;line-height:1.5;margin-top:5px;color:var(--muted)}
.uniparts-grid[data-card-size=compact] .unipart-filter-match{padding:9px 10px}
.uniparts-grid[data-card-size=compact] .unipart-filter-match p{font-size:10px}
.unipart-empty-state{grid-column:1/-1;padding:30px 24px;text-align:center;background:var(--surface);border:1px solid var(--line);border-radius:10px}
.unipart-empty-state h2{margin:0 0 8px;font-size:24px}.unipart-empty-state p{margin:0;color:var(--muted);font-size:13px;line-height:1.6}

@container(max-width:940px) {
  .uniparts-catalog .uniparts-toolbar { grid-template-columns: minmax(0,1fr) 160px auto; }
  .uniparts-toolbar .search { grid-column: 1 / -1; }
}
@container(max-width:560px) {
  .uniparts-catalog .uniparts-toolbar {
    grid-template-columns: minmax(0,1fr) auto;
    gap: 12px;
    padding: 14px;
  }
  .uniparts-toolbar .unipart-effect-control { grid-column: 1 / -1; }
  .uniparts-toolbar .unipart-filter-reset { padding-inline: 12px; }
}
@container(max-width:330px) {
  .uniparts-catalog .uniparts-toolbar { grid-template-columns: minmax(0,1fr); }
  .uniparts-toolbar .unipart-filter-reset { width: 100%; }
}