Слои каскада решают спор раньше специфичности. Строка @layer base, components, utilities; задаёт порядок — позже объявленный слой всегда выигрывает, сколько бы id ни висело на селекторе.

Поэтому .btn в utilities перекрывает #app .btn из base. Куча !important больше не нужна.

Работает везде с марта 2022 — Chrome 99, Firefox 97, Safari 15.4. Статус Baseline, без фолбэков.