.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  display: inline-block;
  vertical-align: middle;
}

.plush-shadow {
  box-shadow: 0 10px 40px -10px rgba(79, 85, 174, 0.10), 0 4px 10px -5px rgba(0, 0, 0, 0.05);
}

.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px -15px rgba(79, 85, 174, 0.14);
}

.soft-inner-shadow {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.03);
}

.transition-soft {
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  border-radius: var(--radius-full);
  color: var(--color-primary);
  transition: background-color 200ms ease, transform 200ms ease;
}

.icon-button:hover {
  background: color-mix(in srgb, var(--color-primary-container) 16%, transparent);
}

.icon-button:active {
  transform: scale(0.96);
}

.filter-pill {
  border-radius: var(--radius-full);
  border: 1px solid color-mix(in srgb, var(--color-outline-variant) 70%, transparent);
  background: var(--color-surface-container);
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
  color: var(--color-on-surface);
  transition: all 200ms ease;
}

.filter-pill:hover,
.filter-pill:focus {
  background: var(--color-surface-container-high);
  border-color: var(--color-primary);
  box-shadow: none;
}

.pagination-button {
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  font-size: 0.875rem;
  font-weight: 500;
  transition: background-color 200ms ease, color 200ms ease;
}

.pagination-button:hover {
  background: var(--color-surface-container);
}

.pagination-button.active {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.active-dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border: 1.5px solid var(--color-primary);
  border-radius: var(--radius-full);
}