.pma-accordion { display: block; max-width: 340px; font-size: 14px; line-height: 1.4; }

.pma-level { margin: 0; padding-left: 0; list-style: none; }
.pma-item  { border-bottom: 1px solid rgba(0,0,0,.06); }

.pma-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 5px 0; }

.pma-link  { display: inline-flex; align-items: flex-start; gap: 8px; text-decoration: none !important; min-width: 0; flex: 1; }
.pma-link:hover { text-decoration: none !important; }

.pma-label { position: relative; display: inline-block; }

.pma-count {
  background-color: #ff5858;
  border-radius: 15px;
  border: 1px solid transparent;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  height: 20px;
  line-height: 20px;
  min-width: 20px;
  padding: 0 6px;
  position: absolute;
  left: 100%;
  top: 0;
  transform: translate(6px, -60%);
  white-space: nowrap;
  text-align: center;
}

.pma-label[data-count]:not([data-count=""])::after {
  content: attr(data-count);
  background-color: #ff5858;
  border-radius: 15px;
  border: 1px solid transparent;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  height: 20px;
  line-height: 20px;
  min-width: 20px;
  padding: 0 6px;
  position: absolute;
  transform: translate(5px, 0px);
  white-space: nowrap;
  text-align: center;
}

.pma-toggle { border: 0; background: transparent; cursor: pointer; padding: 4px; flex: 0 0 auto; }
.pma-toggle:focus { outline: 2px solid #2271b1; outline-offset: 2px; }

.pma-toggle-icon {
  display: inline-block; width: 10px; height: 10px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform .2s ease;
}
.pma-item .pma-toggle[aria-expanded="true"] .pma-toggle-icon { transform: rotate(45deg); }

.pma-sub[hidden] { display: none !important; }

.pma-item.is-active-term  > .pma-row > .pma-link .pma-label,
.pma-item.is-active-ancestor > .pma-row > .pma-link .pma-label { font-weight: 700; }

.pma-level-0 > .pma-item > .pma-row { padding-left: 0; }
.pma-level-1 > .pma-item > .pma-row { padding-left: 12px; }
.pma-level-2 > .pma-item > .pma-row { padding-left: 24px; }
.pma-level-3 > .pma-item > .pma-row { padding-left: 36px; }
.pma-level-4 > .pma-item > .pma-row { padding-left: 48px; }
.pma-level-5 > .pma-item > .pma-row { padding-left: 60px; }
.pma-level-6 > .pma-item > .pma-row { padding-left: 72px; }

/* skeleton */
.pma-accordion.pma-pending {
  position: relative;
  min-height: 160px;
  overflow: hidden;
}
.pma-accordion.pma-pending .pma-level {
  visibility: hidden;
}
.pma-accordion.pma-pending::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(0,0,0,0.05) 0%,
    rgba(0,0,0,0.08) 20%,
    rgba(0,0,0,0.05) 40%,
    rgba(0,0,0,0.05) 100%);
  background-size: 200% 100%;
  animation: pma-shimmer 1.2s linear infinite;
}
@keyframes pma-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: 0 0; }
}

.pma-accordion.pma-ready {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .18s ease-out, transform .18s ease-out;
}
.pma-accordion.pma-ready .pma-level {
  visibility: visible;
}
.pma-accordion.pma-ready::before {
  display: none;
}

.pma-accordion.pma-pending {
  opacity: 0;
  transform: translateY(-4px);
  transition: none;
}

@media only screen and (max-width: 768px) {
  .pma-accordion {
    max-width: 100%;
  }
}

/* collapsable */
/* .pma-block-title {
  font-weight: bold;
  cursor: pointer;
  padding: 0.6em 1em;
  background: #f7f7f7;
  border-radius: 6px;
  margin-bottom: 8px;
  user-select: none;
  transition: background 0.3s;
}
.pma-block-title:hover { background: #ececec; }
.pma-block-title.collapsed::after {
  content: " ▸";
}
.pma-block-title:not(.collapsed)::after {
  content: " ▾";
} */

.pma-block-title {
  font-weight: bold;
  padding: 0.6em 1em;
  background: #f7f7f7;
  border-radius: 6px;
  margin-bottom: 8px;
  user-select: none;
}

.pma-block-title[role="button"] {
  cursor: pointer;
  transition: background 0.3s;
}
.pma-block-title[role="button"]:hover {
  background: #ececec;
}
.pma-block-title[role="button"].collapsed::after {
  content: " ▸";
}
.pma-block-title[role="button"]:not(.collapsed)::after {
  content: " ▾";
}