.fo-filter-row {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  align-items: end;
  gap: 12px 18px;
}

.chiprow { display: flex; flex-wrap: wrap; gap: 5px; }
.chip-group-row {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: border-color .12s, color .12s, background .12s;
}
.chip:hover { border-color: var(--accent); color: var(--text); }

.chip .dot { width: 8px; height: 8px; border-radius: 50%; }
.chip[data-rarity="normal"] .dot { background: var(--r-normal); }
.chip[data-rarity="special"] .dot { background: var(--r-special); }
.chip[data-rarity="rare"]    .dot { background: var(--r-rare); }
.chip[data-rarity="master"]  .dot { background: var(--r-master); }
.chip[data-rarity="super"]   .dot { background: var(--r-super-2); }
.chip[data-rarity="mythic"]  .dot { background: var(--r-mythic); }

.chip[data-rarity="normal"].on  { --rc: var(--r-normal); }
.chip[data-rarity="special"].on { --rc: var(--r-special); }
.chip[data-rarity="rare"].on    { --rc: var(--r-rare); }
.chip[data-rarity="master"].on  { --rc: var(--r-master); }
.chip[data-rarity="super"].on   { --rc: var(--r-super); }
.chip[data-rarity="mythic"].on  { --rc: var(--r-mythic); }
.chip[data-rarity].on {
  border-color: var(--rc);
  color: #FFFFFF;
  background: var(--rc);
}
.chip[data-rarity="super"].on {
  background: linear-gradient(135deg, var(--r-super), var(--r-super-2));
  color: var(--r-super-ink);
}
.chip[data-rarity].on .dot { background: rgba(255, 255, 255, .85); }

.chip[data-position="GK"] { --pc: var(--pos-gk); }
.chip[data-position="SW"], .chip[data-position="CB"], .chip[data-position="FB"], .chip[data-position="WB"] { --pc: var(--pos-df); }
.chip[data-position="DM"], .chip[data-position="CM"], .chip[data-position="WM"], .chip[data-position="AM"] { --pc: var(--pos-os); }
.chip[data-position="WF"], .chip[data-position="CF"], .chip[data-position="ST"] { --pc: var(--pos-fv); }
.chip[data-position] .dot { background: var(--pc); }
.chip[data-position].on {
  border-color: var(--pc);
  color: #FFFFFF;
  background: var(--pc);
}
.chip[data-position].on .dot { background: rgba(255, 255, 255, .85); }

.filterbar-actions {
  display: flex;
  gap: 6px;
  justify-self: end;
}
.filterbar-actions .btn-ghost { min-height: 32px; }