Your code does not seem to work right on firefox ESR, or Inkscape either so im having a bit hard time deciding what it should look like. IE renders the image as:

Is this correct?
Your code is not valid according to W3C validator.
For starters you need to write svg 1.1 code since that is what you say you are doing. there is no such tag as def
it should be defs
. So you can not use href
atributes in <use>
tags you need to use xlink:href
instead. If you do this you get into illustrator but the thinsg have wrong size (still dont work in inkscape though).
Second, you can not rely on CSS to style all your needs because illustrator won't support all CSS that a browser would. For example neither Firefox does noyt seem to do letter-spacing
and illustrator wont do text-transform
etc.
Anyway illustrator is not a SVG editor as such, and tends to not work well with handcrafted svg. But the fact that even inkscape 0.92 throws you off means you have serious problems.