Js файл исправили. Но в целом ситуация не сильно улучшилась. И меня уже это утомило.
Кнопки категорий так и остались бирюзовыми все. Нужно похоже исправлять стили. Ниже я дам тебе вариант стилей, когда кнопки-пилюли были правильные и цветные.
Также мне не нравится урезание содержимого кнопок фильтрации. Давай вообще сделаем по другому. Удаляем кнопку выбора фильтра по категории, так как функционал уже реализован через нажатие категории под фильтром. 
Кнопку фильтра по датам разместить сразу под заголовком Детальные расходы вместо надписи указывающий текущий диапазон (она будет не нужна).
Также заметил, что на десктопе карточки расходов теперь как-то некорректно отображаются, а точнее элементы внутри карточек. (см.скрин).
Вот css код при котором пилюли были правильные:
/* iifin-expenses-detailed.css (FULL REPLACE)
   Covers BOTH:
   - #iifin-expenses-detailed (.iifin-expenses-detailed)
   - #iifin-incomes-detailed  (.iifin-incomes-detailed)
*/

/* ------------------------------------------------------------
   Root panel (both forms)
------------------------------------------------------------ */

#iifin-expenses-detailed,
#iifin-incomes-detailed{
  background: #f1ede7;
  border-radius: 18px;
  padding: 16px;
  border: 1px solid rgba(0,0,0,.06);
  box-sizing: border-box;
}

/* hidden must always hide */
#iifin-detailed-root[hidden] { display:none !important; }
#iifin-detailed-root [hidden] { display:none !important; }

/* box-sizing inside */
#iifin-expenses-detailed *,
#iifin-incomes-detailed *{
  box-sizing: border-box;
}

/* ------------------------------------------------------------
   Tabs: "Расходы / Доходы"
------------------------------------------------------------ */

.iifin-detailed-tabs{
  display:flex;
  gap:10px;
  margin-bottom:12px;
}

.iifin-detailed-tab{
  height:44px;
  padding:0 16px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.65);
  cursor:pointer;
  font-weight:800;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  transition: transform .05s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease, opacity .15s ease;
  opacity: .88;
}

.iifin-detailed-tab:hover{ background: rgba(255,255,255,.85); opacity:1; }

.iifin-detailed-tab[aria-selected="true"]{
  background: #24A8A6;
  color:#fff;
  border-color: rgba(36,168,166,.85);
  box-shadow: 0 10px 20px rgba(0,0,0,.10);
  opacity: 1;
}

.iifin-detailed-tab[aria-selected="false"]{ color:#0f172a; }

.iifin-detailed-tab:active{ transform: translateY(1px); }

@media (max-width: 980px){
  .iifin-detailed-tabs{ flex-wrap:wrap; }
  .iifin-detailed-tab{ flex:1 1 auto; }
}

/* ------------------------------------------------------------
   Head
------------------------------------------------------------ */

.iifin-expenses-detailed__head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.iifin-expenses-detailed__title{
  margin:0;
  font-size:18px;
  font-weight:900;
}

.iifin-expenses-detailed__meta{
  font-size:13px;
  opacity:.85;
  margin-top:4px;
  line-height:1.35;
}

/* ------------------------------------------------------------
   KPI cards row
------------------------------------------------------------ */

.iifin-expenses-detailed__kpis{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:10px;
  margin: 12px 0 8px;
}

.iifin-expenses-detailed__kpi{
  padding: 12px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(0,0,0,.06);
}

.iifin-expenses-detailed__kpi-label{
  font-size: 12px;
  opacity: .7;
  margin-bottom: 6px;
}

.iifin-expenses-detailed__kpi-value{
  font-size: 16px;
  font-weight: 900;
}

.iifin-expenses-detailed__kpi-sub{
  margin-top: 6px;
  font-size: 12px;
  opacity: .75;
  font-weight: 700;
}

@media (max-width: 980px){
  .iifin-expenses-detailed__kpis{ grid-template-columns: 1fr 1fr; }
}

/* ------------------------------------------------------------
   Presets (пока оставляем; позже можно убрать)
------------------------------------------------------------ */

.iifin-expenses-detailed__presets{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin: 10px 0 6px;
}

.iifin-expenses-detailed__presets-label{
  font-size:13px;
  color:#6b7280;
  margin-right:4px;
}

.iifin-expenses-detailed__presetbtn{
  border:1px solid rgba(0,0,0,.08);
  background: rgba(36,168,166,.12);
  border-radius: 14px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight:800;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  transition: transform .05s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.iifin-expenses-detailed__presetbtn:hover{
  border-color: rgba(36,168,166,.45);
  background: rgba(36,168,166,.18);
}

.iifin-expenses-detailed__presetbtn.is-active{
  background:#24A8A6;
  color:#fff;
  border-color: rgba(36,168,166,.85);
  box-shadow: 0 10px 20px rgba(0,0,0,.10);
}

.iifin-expenses-detailed__presetbtn:active{ transform: translateY(1px); }

/* ------------------------------------------------------------
   Buttons (универсально)
------------------------------------------------------------ */

.iifin-expenses-detailed__btn{
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.70);
  cursor: pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  font-weight:900;
  transition: transform .05s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.iifin-expenses-detailed__btn:hover{ background: rgba(255,255,255,.85); }
.iifin-expenses-detailed__btn:active{ transform: translateY(1px); }

.iifin-expenses-detailed__btn--primary{
  background:#24A8A6;
  color:#fff;
  border-color: rgba(36,168,166,.85);
  box-shadow: 0 10px 20px rgba(0,0,0,.10);
}

.iifin-expenses-detailed__btn--primary:hover{ background:#1f9b99; }

.iifin-expenses-detailed__hint{
  font-size:12px;
  opacity:.75;
  margin-top: 8px;
}

/* ------------------------------------------------------------
   Sections (общие заголовки)
   Усиливаем акцент секции создания записи (п.3)
------------------------------------------------------------ */

.iifin-expenses-detailed__section{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(0,0,0,.06);
}

.iifin-expenses-detailed__sectionhead{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

.iifin-expenses-detailed__sectiontitle{
  font-weight: 950;
  font-size: 16px;
  letter-spacing: .2px;
}

.iifin-expenses-detailed__sectionsub{
  font-size: 12px;
  opacity: .75;
  font-weight: 700;
}

/* Доп. акцент именно для секции добавления */
.iifin-expenses-detailed__section--add .iifin-expenses-detailed__sectiontitle{
  font-size: 17px;
}

/* ------------------------------------------------------------
   Controls row (пока как было)
------------------------------------------------------------ */

.iifin-expenses-detailed__controls{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr 320px;
  gap: 10px;
  margin: 12px 0;
  align-items: end;
}

.iifin-expenses-detailed__field{
  display:grid;
  gap:6px;
  font-size:12px;
  opacity:.95;
  min-width: 0;
}

.iifin-expenses-detailed__field input,
.iifin-expenses-detailed__field select{
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.10);
  padding: 0 12px;
  background: rgba(255,255,255,.75);
  outline: none;
  min-width: 0;
}

.iifin-expenses-detailed__field input:focus,
.iifin-expenses-detailed__field select:focus{
  border-color: rgba(36,168,166,.55);
  box-shadow: 0 0 0 3px rgba(36,168,166,.12);
}

@media (max-width: 980px){
  .iifin-expenses-detailed__controls{
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }
}

/* ------------------------------------------------------------
   Add form
------------------------------------------------------------ */

.iifin-expenses-detailed__add{
  margin-top: 10px;
}

.iifin-expenses-detailed__addgrid{
  display:grid;
  grid-template-columns: 1.1fr 1fr 1.2fr 2fr;
  gap: 10px;
  margin-bottom: 10px;
  align-items:end;
}

.iifin-expenses-detailed__field--note input{ width:100%; }

@media (max-width: 980px){
  .iifin-expenses-detailed__addgrid{ grid-template-columns: 1fr 1fr; }
}

/* ------------------------------------------------------------
   Breakdown (pie + category pills)
------------------------------------------------------------ */

.iifin-expenses-detailed__breakdown{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(0,0,0,.06);
}

.iifin-expenses-detailed__breaktitle{
  font-weight: 900;
  font-size: 16px;
}

.iifin-expenses-detailed__breakgrid{
  display:grid;
  grid-template-columns: 360px 1fr;
  gap: 12px;
  margin-top: 10px;
}

.iifin-expenses-detailed__piebox{
  height: 260px;
  border-radius: 14px;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(0,0,0,.06);
  padding: 10px;
}

.iifin-expenses-detailed__chartwarn{
  font-size:12px;
  opacity:.75;
  margin-bottom:8px;
}

@media (max-width: 980px){
  .iifin-expenses-detailed__breakgrid{ grid-template-columns: 1fr; }
  .iifin-expenses-detailed__piebox{ height: 240px; }
}

/* ------------------------------------------------------------
   Category pills (NEW markup from JS)
   FIX (п.1): повышаем специфичность + !important, чтобы мусорные стили не перебивали
------------------------------------------------------------ */

#iifin-expenses-detailed .iifin-expenses-detailed__catpills,
#iifin-incomes-detailed  .iifin-expenses-detailed__catpills{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:flex-start;
}

#iifin-expenses-detailed .iifin-expenses-detailed__catpill,
#iifin-incomes-detailed  .iifin-expenses-detailed__catpill{
  height:34px;
  padding:0 12px;
  border-radius:999px;

  /* важно: не даём общим стилям кнопок подменить */
  background: var(--iifin-pill-bg, rgba(255,255,255,.70)) !important;
  color: var(--iifin-pill-fg, #0f172a) !important;
  border: 1px solid var(--iifin-pill-bd, rgba(0,0,0,.10)) !important;

  display:inline-flex;
  align-items:center;
  gap:8px;

  font-size:13px;
  font-weight:900;
  line-height:1;

  cursor:pointer;
  text-align:left;
  max-width:100%;
  box-shadow: none;
  transition: transform .05s ease, box-shadow .15s ease, filter .15s ease;
}

#iifin-expenses-detailed .iifin-expenses-detailed__catpill:hover,
#iifin-incomes-detailed  .iifin-expenses-detailed__catpill:hover{
  filter: brightness(0.98);
}

#iifin-expenses-detailed .iifin-expenses-detailed__catpill:active,
#iifin-incomes-detailed  .iifin-expenses-detailed__catpill:active{
  transform: translateY(1px);
}

#iifin-expenses-detailed .iifin-expenses-detailed__catpill.is-active,
#iifin-incomes-detailed  .iifin-expenses-detailed__catpill.is-active{
  box-shadow: 0 10px 18px rgba(0,0,0,.10);
  outline: 2px solid rgba(36,168,166,.22);
}

.iifin-expenses-detailed__catpill-ico{
  font-size:18px;
  line-height:1;
  opacity:.92;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* FIX (п.2): НЕЛЬЗЯ резать название как "Транс..." — даём 2 строки без троеточия */
.iifin-expenses-detailed__catpill-name{
  white-space: normal;
  overflow: visible;
  text-overflow: clip;

  display:-webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

  max-width: 260px;
  line-height: 1.15;
}

/* На мобиле можно шире — чтобы меньше переносов */
@media (max-width: 980px){
  .iifin-expenses-detailed__catpill-name{ max-width: 72vw; }
}

/* ------------------------------------------------------------
   Months grouping + rows list
------------------------------------------------------------ */

.iifin-expenses-detailed__list{
  margin-top: 10px;
}

.iifin-expenses-detailed__month{
  margin-top: 12px;
}

.iifin-expenses-detailed__month:first-child{
  margin-top: 8px;
}

.iifin-expenses-detailed__monthhead{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.40);
  border: 1px solid rgba(0,0,0,.06);
}

.iifin-expenses-detailed__monthtitle{
  font-weight: 900;
  font-size: 14px;
}

.iifin-expenses-detailed__monthsum{
  font-size: 12px;
  opacity: .85;
  white-space: nowrap;
}

.iifin-expenses-detailed__rows{
  display:grid;
  gap: 10px;
  margin-top: 10px;
}

/* day separators */
.iifin-expenses-detailed__day{
  margin-top: 6px;
}

.iifin-expenses-detailed__dayhead{
  font-size: 12px;
  font-weight: 950;
  opacity: .60;
  padding: 0 6px;
  margin: 10px 0 6px;
}

/* ------------------------------------------------------------
   Row base (edit mode uses classic grid)
------------------------------------------------------------ */

.iifin-expenses-detailed__row{
  position: relative;
  display:grid;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(0,0,0,.06);
  min-width: 0;
}

/* edit layout */
.iifin-expenses-detailed__row.is-editing{
  grid-template-columns: 140px 160px 220px minmax(220px, 1fr) auto;
}

/* compact layout (view mode from JS: category + amount + actions) */
.iifin-expenses-detailed__row.is-compact{
  grid-template-columns: minmax(0, 1fr) auto auto;
}

/* cells */
.iifin-expenses-detailed__rowdate{
  font-size: 13px;
  opacity: .9;
}

.iifin-expenses-detailed__rowcat{
  display:inline-flex;
  align-items:flex-start; /* чтобы 2 строки выглядели нормально */
  gap: 10px;
  min-width:0;
}

.iifin-expenses-detailed__caticon{
  font-size: 20px;
  line-height: 1;
  opacity: .85;
  flex: 0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top: 1px;
}

/* FIX (п.2): не режем название категории */
.iifin-expenses-detailed__catname{
  font-size: 13px;
  font-weight: 950;
  opacity: .95;

  white-space: normal;
  overflow: visible;
  text-overflow: clip;

  display:-webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

  min-width:0;
  line-height: 1.15;
}

.iifin-expenses-detailed__rownote{
  font-size: 13px;
  opacity: .9;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width:0;
}

.iifin-expenses-detailed__rowamt{
  text-align:right;
  font-weight: 950;
  white-space:nowrap;
}

/* actions */
.iifin-expenses-detailed__rowactions{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:10px;
  white-space:nowrap;
}

.iifin-expenses-detailed__iconbtn{
  width:44px;
  height:44px;
  border-radius:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  cursor:pointer;
  padding:0;
  transition: transform .05s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}

.iifin-expenses-detailed__iconbtn .material-symbols-outlined{
  font-size:22px;
  line-height:1;
  font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 24;
}

.iifin-expenses-detailed__iconbtn:hover{
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  transform: translateY(-1px);
  border-color: rgba(36,168,166,.35);
}

.iifin-expenses-detailed__iconbtn:active{ transform: translateY(1px); }

.iifin-expenses-detailed__iconbtn.is-danger{
  border-color: rgba(220, 0, 0, .18);
}

.iifin-expenses-detailed__iconbtn.is-ok{
  border-color: rgba(0, 140, 70, .20);
}

/* inputs safety */
.iifin-expenses-detailed__row input,
.iifin-expenses-detailed__row select{
  min-width: 0;
  max-width: 100%;
}

/* mobile */
@media (max-width: 980px){
  .iifin-expenses-detailed__monthhead{
    flex-direction: column;
    align-items: flex-start;
  }
  .iifin-expenses-detailed__monthsum{ white-space: normal; }

  .iifin-expenses-detailed__row.is-editing{
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .iifin-expenses-detailed__row.is-compact{
    grid-template-columns: minmax(0,1fr) auto auto;
    gap: 8px;
    padding: 10px 12px;
  }

  .iifin-expenses-detailed__iconbtn{
    width:40px;
    height:40px;
    border-radius:12px;
  }
  .iifin-expenses-detailed__iconbtn .material-symbols-outlined{ font-size:20px; }
}

/* empty */
.iifin-expenses-detailed__empty{
  padding: 12px;
  opacity: .75;
}

/* ------------------------------------------------------------
   FUTURE: compact filter bar (2 buttons under title)
   (Когда переделаем разметку фильтров — эти стили уже готовы)
------------------------------------------------------------ */

.iifin-expenses-detailed__filtersbar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin: 12px 0;
}

.iifin-expenses-detailed__filterbtn{
  height:44px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.70);
  padding: 0 14px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:950;
  cursor:pointer;
  transition: transform .05s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.iifin-expenses-detailed__filterbtn:hover{
  background: rgba(255,255,255,.85);
  border-color: rgba(36,168,166,.35);
}

.iifin-expenses-detailed__filterbtn:active{ transform: translateY(1px); }

.iifin-expenses-detailed__filterbtn .material-symbols-outlined{
  font-size: 20px;
  opacity:.85;
}

.iifin-expenses-detailed__filterbtn-label{
  opacity:.70;
  font-weight:900;
  font-size:12px;
}

.iifin-expenses-detailed__filterbtn-value{
  font-weight:950;
  font-size:13px;
}
/* =========================================================
   PATCH: period button under title (single button)
   ========================================================= */

#iifin-expenses-detailed .iifin-expenses-detailed__periodbtn,
#iifin-incomes-detailed  .iifin-expenses-detailed__periodbtn{
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.70);
  padding: 0 14px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:950;
  cursor:pointer;
  transition: transform .05s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

#iifin-expenses-detailed .iifin-expenses-detailed__periodbtn:hover,
#iifin-incomes-detailed  .iifin-expenses-detailed__periodbtn:hover{
  background: rgba(255,255,255,.85);
  border-color: rgba(36,168,166,.35);
}

#iifin-expenses-detailed .iifin-expenses-detailed__periodbtn:active,
#iifin-incomes-detailed  .iifin-expenses-detailed__periodbtn:active{
  transform: translateY(1px);
}

#iifin-expenses-detailed .iifin-expenses-detailed__periodbtn .material-symbols-outlined,
#iifin-incomes-detailed  .iifin-expenses-detailed__periodbtn .material-symbols-outlined{
  font-size: 20px;
  opacity:.85;
}

#iifin-expenses-detailed .iifin-expenses-detailed__periodbtn-text,
#iifin-incomes-detailed  .iifin-expenses-detailed__periodbtn-text{
  font-size: 13px;
  font-weight: 950;
  line-height: 1.1;
}

#iifin-expenses-detailed .iifin-expenses-detailed__periodbtn-caret,
#iifin-incomes-detailed  .iifin-expenses-detailed__periodbtn-caret{
  margin-left:auto;
  opacity:.8;
}
/* =========================================================
   FIX v2: Tabs active state (catch-all)
   Put at the VERY END of iifin-expenses-detailed.css
========================================================= */

/* base */
.iifin-detailed-tabs .iifin-detailed-tab{
  background-color: rgba(255,255,255,.65) !important;
  color: #0f172a !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  opacity: .88 !important;
  box-shadow: none !important;
}

/* active: aria on self */
.iifin-detailed-tabs .iifin-detailed-tab[aria-selected="true"],
/* active: class-based */
.iifin-detailed-tabs .iifin-detailed-tab.is-active,
.iifin-detailed-tabs .iifin-detailed-tab.active,
/* active: data-flag */
.iifin-detailed-tabs .iifin-detailed-tab[data-active="1"],
.iifin-detailed-tabs .iifin-detailed-tab[data-active="true"],
/* active: aria/class on parent wrapper */
.iifin-detailed-tabs [aria-selected="true"] > .iifin-detailed-tab,
.iifin-detailed-tabs .is-active > .iifin-detailed-tab,
.iifin-detailed-tabs .active > .iifin-detailed-tab{
  background-color: #24A8A6 !important;
  color: #fff !important;
  border-color: rgba(36,168,166,.85) !important;
  box-shadow: 0 10px 20px rgba(0,0,0,.10) !important;
  opacity: 1 !important;
}

/* hover */
.iifin-detailed-tabs .iifin-detailed-tab:hover{
  background-color: rgba(255,255,255,.85) !important;
  border-color: rgba(36,168,166,.35) !important;
  opacity: 1 !important;
}

/* hover for active: keep teal */
.iifin-detailed-tabs .iifin-detailed-tab[aria-selected="true"]:hover,
.iifin-detailed-tabs .iifin-detailed-tab.is-active:hover,
.iifin-detailed-tabs .iifin-detailed-tab.active:hover,
.iifin-detailed-tabs .iifin-detailed-tab[data-active="1"]:hover,
.iifin-detailed-tabs .iifin-detailed-tab[data-active="true"]:hover{
  background-color: #1f9b99 !important;
  border-color: rgba(36,168,166,.95) !important;
}