.station-container .channel-category {
  border: 1px solid var(--border-secondary);
  border-radius: var(--border-radius-md);
  background: var(--background-primary);
  margin-bottom: var(--spacing-xl);
  overflow: hidden;
  transition: box-shadow var(--transition-normal);
}

.station-container .channel-category.hidden {
  display: none;
}

.station-container .channel-category h2 {
  background: var(--background-secondary);
  padding: var(--padding-md);
  margin: 0;
  cursor: pointer;
  border-bottom: 1px solid var(--border-secondary);
  user-select: none;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  transition: background var(--transition-normal);
}

.station-container .channel-category h2:hover {
  background: var(--border-secondary);
}

.station-container .channel-category ul {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-slow);
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  padding: 0 var(--padding-md);
}

.station-container .channel-category ul.station-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.station-container .channel-category ul.station-grid .station-item {
  flex: 1 1 110px;
  max-width: 130px;
  text-align: center;
  cursor: pointer;
  padding: var(--padding-sm) var(--padding-xs);
  border: 1.5px solid transparent;
  border-radius: var(--border-radius-sm);
  transition:
    border-color var(--transition-normal),
    background var(--transition-normal);
  list-style: none;
}

.station-container
  .channel-category
  ul.station-grid
  .station-item.filter-hidden,
.station-container
  .channel-category
  ul.station-grid
  .station-item.search-hidden {
  display: none;
}

.station-container .channel-category ul.station-grid .station-item:hover {
  border-color: var(--border-secondary);
  background: var(--background-secondary);
  color: var(--text-primary);
}

.station-container .channel-category ul.station-grid .station-item:focus,
.station-container .channel-category ul.station-grid .station-item.playing {
  border-color: var(--accent);
  background: var(--background-secondary);
  color: var(--text-primary);
}

.station-container .channel-category ul.station-grid .station-item .title {
  margin-top: var(--spacing-sm);
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  font-weight: var(--font-weight-medium);
}

.station-container .channel-category ul.station-grid .station-item .fav-icon {
  font-size: var(--font-size-md);
  cursor: pointer;
  color: var(--text-muted);
  margin-top: var(--spacing-xs);
  transition: color var(--transition-normal);
}

.station-container
  .channel-category
  ul.station-grid
  .station-item
  .fav-icon.active {
  color: var(--favorite);
}

.station-container .channel-category ul.station-grid .station-item .artwork {
  position: relative;
}

.station-container
  .channel-category
  ul.station-grid
  .station-item
  .artwork
  img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: var(--shadow-sm);
}

.station-container .channel-category.open ul {
  max-height: 10000px;
  padding-bottom: var(--padding-md);
}

@media (max-width: 480px) {
  .station-container .channel-category ul {
    gap: var(--spacing-xs);
    padding: 0 var(--padding-xs);
  }

  .station-container .channel-category ul.station-grid .station-item {
    flex: 1 1 80px;
    max-width: 100px;
    min-width: 80px;
    padding: var(--padding-xs);
  }

  .station-container
    .channel-category
    ul.station-grid
    .station-item
    .artwork
    img {
    width: 40px;
    height: 40px;
  }

  .station-container .channel-category ul.station-grid .station-item .title {
    font-size: var(--font-size-sm);
  }
}