.recommend-apps {
  width: 100%;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 18px;
  display: flex;
}

.recommend-apps__grid {
  align-self: stretch;
  border-radius: 16px;
  /* 顶对齐:名字换行的项往下长,不把同排图标顶出水平线 */
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 18px 16px;
}

/* 固定列宽 56px:图标列对齐,名字超长走 __name 的省略号 */
.recommend-apps__item {
  width: 56px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 4px;
  display: inline-flex;
}

/* 空态占满整行,不做成一块假的应用图标 */
.recommend-apps__item--empty {
  width: 100%;
  padding: 12px 0;
}

.recommend-apps__icon-wrap {
  width: 56px;
  height: 56px;
  position: relative;
  background: var(--color-neutral-200);
  overflow: hidden;
  border-radius: 8px;
}

.recommend-apps__icon {
  width: 56px;
  height: 56px;
  left: 0;
  top: 0;
  position: absolute;
}

/* 名字单行,最多显示四个汉字后省略:56px 列 12px 字号下 4 汉字 48px + 省略号 ≈60px,
   需要 64px 文本盒;负 margin 只扩文本盒不动列宽(列间 gap 12px,两侧各溢 4px 仍有余量) */
.recommend-apps__name {
  text-align: center;
  color: var(--text-primary);
  font-size: 12px;
  font-family: PingFang SC, sans-serif;
  font-weight: 400;
  line-height: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: calc(100% + 8px);
  margin-left: -4px;
  margin-right: -4px;
}

@media (max-width: 768px) {
  .recommend-apps {
    gap: 12px;
    align-self: stretch;
  }

  /* 固定五列网格:不足五个也按列占位,不再整体居中;列宽随视口伸缩 */
  .recommend-apps__grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: start;
    gap: 8px;
    padding: 18px 8px;
    background: var(--surface-foreground);
    border-radius: 16px;
    border: 1px solid var(--color-black-alpha-5);
  }

  /* 裸宫格(详情页 recommendAppsGrid,无 .recommend-apps 外壳):5 列×3 排 */
  .recommend-apps__item:nth-child(n + 16) {
    display: none;
  }

  /* 带标题列表页(有 .recommend-apps 外壳):维持 5 列×2 排,特异性更高覆盖上条 */
  .recommend-apps .recommend-apps__item:nth-child(n + 11) {
    display: none;
  }

  .recommend-apps__item {
    width: 100%;
  }

  .recommend-apps__item--empty {
    grid-column: 1 / -1;
  }

  .recommend-apps__icon-wrap {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    background: var(--color-neutral-200);
    border-radius: 8px;
  }

  .recommend-apps__icon {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

}

@media (max-width: 480px) {
  .recommend-apps__grid {
    gap: 8px 6px;
  }
}