/* Keep mobile/tablet category filters visually consistent across workspace pages. */
@media (max-width: 1180px), (max-width: 1366px) and (pointer: coarse) {
  :root body .workspace[data-mobile-page="classes"] .filter-bar .cat-chip,
  :root body .workspace[data-mobile-page="classes"] .filter-bar .cat-chip:hover,
  :root body .workspace[data-mobile-page="classes"] .filter-bar .cat-chip.active,
  :root body .workspace .inspiration-page .gallery-filters button,
  :root body .workspace .inspiration-page .gallery-filters button:hover,
  :root body .workspace .inspiration-page .gallery-filters button.active {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 34px;
    padding: 6px 11px;
    border: 1px solid rgba(148, 163, 184, .28);
    border-radius: 999px;
    background: rgba(148, 163, 184, .09);
    box-shadow: none;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.25;
    white-space: nowrap;
    transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease;
  }

  :root body .workspace[data-mobile-page="classes"] .filter-bar .cat-chip:hover,
  :root body .workspace .inspiration-page .gallery-filters button:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
  }

  :root body .workspace[data-mobile-page="classes"] .filter-bar .cat-chip.active,
  :root body .workspace .inspiration-page .gallery-filters button.active,
  :root body .workspace[data-mobile-page="classes"] .filter-bar .cat-chip.active:hover,
  :root body .workspace .inspiration-page .gallery-filters button.active:hover {
    border-color: var(--color-primary);
    background: rgba(0, 229, 160, .17);
    color: var(--color-primary);
    box-shadow: 0 0 12px rgba(0, 229, 160, .12);
    font-weight: 700;
  }

  :root body .workspace[data-mobile-page="classes"] .filter-bar .cat-chip:nth-child(2),
  :root body .workspace .inspiration-page .gallery-filters button:nth-child(2) {
    border-color: rgba(0, 229, 160, .42);
    background: rgba(0, 229, 160, .12);
    color: #55edbd;
  }

  :root body .workspace[data-mobile-page="classes"] .filter-bar .cat-chip:nth-child(3),
  :root body .workspace .inspiration-page .gallery-filters button:nth-child(3) {
    border-color: rgba(127, 154, 255, .45);
    background: rgba(127, 154, 255, .14);
    color: #b5c3ff;
  }

  :root body .workspace[data-mobile-page="classes"] .filter-bar .cat-chip:nth-child(4),
  :root body .workspace .inspiration-page .gallery-filters button:nth-child(4) {
    border-color: rgba(97, 181, 255, .45);
    background: rgba(97, 181, 255, .13);
    color: #9bd4ff;
  }

  :root body .workspace[data-mobile-page="classes"] .filter-bar .cat-chip:nth-child(5),
  :root body .workspace .inspiration-page .gallery-filters button:nth-child(5) {
    border-color: rgba(167, 139, 250, .48);
    background: rgba(167, 139, 250, .14);
    color: #d0c0ff;
  }

  :root body .workspace[data-mobile-page="classes"] .filter-bar .cat-chip:nth-child(6),
  :root body .workspace .inspiration-page .gallery-filters button:nth-child(6) {
    border-color: rgba(232, 121, 249, .46);
    background: rgba(232, 121, 249, .13);
    color: #f2b6fa;
  }

  :root body .workspace[data-mobile-page="classes"] .filter-bar .cat-chip:nth-child(7),
  :root body .workspace .inspiration-page .gallery-filters button:nth-child(7) {
    border-color: rgba(245, 165, 67, .48);
    background: rgba(245, 165, 67, .14);
    color: #ffd08c;
  }

  :root body .workspace[data-mobile-page="classes"] .filter-bar .cat-chip:nth-child(8),
  :root body .workspace .inspiration-page .gallery-filters button:nth-child(8) {
    border-color: rgba(250, 204, 21, .42);
    background: rgba(250, 204, 21, .12);
    color: #ffe675;
  }

  :root body .workspace[data-mobile-page="classes"] .filter-bar .cat-chip:nth-child(9),
  :root body .workspace .inspiration-page .gallery-filters button:nth-child(9) {
    border-color: rgba(251, 113, 133, .44);
    background: rgba(251, 113, 133, .12);
    color: #ffb2bf;
  }

  :root body .workspace[data-mobile-page="classes"] .filter-bar .cat-chip:nth-child(10),
  :root body .workspace .inspiration-page .gallery-filters button:nth-child(10) {
    border-color: rgba(45, 212, 191, .44);
    background: rgba(45, 212, 191, .12);
    color: #8af2e2;
  }

  :root body .workspace[data-mobile-page="classes"] .filter-bar .cat-chip.active,
  :root body .workspace[data-mobile-page="classes"] .filter-bar .cat-chip.active:hover,
  :root body .workspace .inspiration-page .gallery-filters button.active,
  :root body .workspace .inspiration-page .gallery-filters button.active:hover {
    border-color: var(--color-primary);
    background: rgba(0, 229, 160, .19);
    color: var(--color-primary);
  }

  :root body .workspace[data-mobile-page="classes"] .filter-bar,
  :root body .workspace .inspiration-page .gallery-filters {
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
  }
}

@media (max-width: 420px) {
  :root body .workspace[data-mobile-page="classes"] .filter-bar .cat-chip,
  :root body .workspace[data-mobile-page="classes"] .filter-bar .cat-chip:hover,
  :root body .workspace[data-mobile-page="classes"] .filter-bar .cat-chip.active,
  :root body .workspace .inspiration-page .gallery-filters button,
  :root body .workspace .inspiration-page .gallery-filters button:hover,
  :root body .workspace .inspiration-page .gallery-filters button.active {
    min-height: 32px;
    padding: 5px 9px;
    font-size: 11px;
  }
}

:root[data-theme="light"] body .workspace[data-mobile-page="classes"] .filter-bar .cat-chip,
:root[data-theme="light"] body .workspace .inspiration-page .gallery-filters button {
  border-color: rgba(71, 85, 105, .24);
  background: rgba(241, 245, 249, .92);
  color: #475569;
}

:root[data-theme="light"] body .workspace[data-mobile-page="classes"] .filter-bar .cat-chip.active,
:root[data-theme="light"] body .workspace .inspiration-page .gallery-filters button.active {
  border-color: #00a878;
  background: rgba(0, 168, 120, .12);
  color: #007b5c;
}