.selection-flow-resource-grid {
  .pisell-lowcode-card {
    min-height: 166px;
  }

  // ResourceDisplay 的文本头像沿用 Ant Avatar 的缩放定位规则；在 Flow 的
  // 纵向卡片中改为由 flex 容器直接居中，避免首字母视觉上向右偏移。
  .pisell-resource-card-empty-avatar
    .pisell-lowcode-avatar-string,
  .pisell-resource-card-empty-avatar .ant-avatar-string {
    position: static;
    left: auto;
    width: 100%;
    margin: 0;
    text-align: center;
    transform: none !important;
    transform-origin: center;
  }

  // 不依赖 PisellText 的默认 display/text-align，确保资源名称始终相对
  // 整张卡片居中，而不是相对文字自身宽度居中。
  .pisell-resource-card-info {
    align-items: center;
    text-align: center;
  }

  .pisell-resource-card-name {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
  }

  .selection-flow-resource-card--disabled {
    cursor: not-allowed;
    opacity: 0.45;
  }

  .selection-flow-resource-card-shell {
    position: relative;
    height: 100%;
  }

  .selection-flow-resource-card__warning {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1;
    display: inline-flex;
    width: 16px;
    height: 16px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--Warning-500, #f79009);
    color: var(--Base-White, #fff);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
  }

  // 默认使用四列；只有真正窄于手机内容宽度时才退回两列。
  // 需要 !important 覆盖 PisellViewGrid 写在元素上的 grid-template-columns。
  @media (max-width: 600px) {
    .pisell-view-grid-content {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
  }
}