.container {
  min-height: 100vh;
  background-color: #f6f7f9;
  padding-bottom: 40px;
}

.loadingContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}

// 头部核心卡片
.headerCard {
  background: linear-gradient(135deg, #1677ff 0%, #4096ff 100%);
  padding: 32px 16px 48px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 16px;

  .avatar {
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  .userInfo {
    flex: 1;

    .nickname {
      font-size: 22px;
      font-weight: 600;
      margin-bottom: 6px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 8px;

      .levelBadge {
        background: rgba(255, 255, 255, 0.2);
        padding: 2px 8px;
        border-radius: 4px;
        font-size: 12px;
      }
    }
  }
}

// 通用卡片容器
.card {
  margin: -24px 12px 16px;
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  position: relative;
  z-index: 1;

  &.noOverlap {
    margin-top: 16px;
  }
}

.sectionTitle {
  font-size: 17px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .titleLine {
    display: inline-block;
    width: 4px;
    height: 16px;
    background: #1677ff;
    border-radius: 2px;
    margin-right: 8px;
    vertical-align: middle;
  }
}

// 基础信息列表
.infoGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;

  .infoItem {
    .label {
      font-size: 13px;
      color: #8c8c8c;
      margin-bottom: 4px;
    }
    .value {
      font-size: 15px;
      color: #262626;
      font-weight: 500;
    }
  }
}

// 统计面板
.statsGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;

  .statBox {
    background: #f8fbff;
    padding: 12px;
    border-radius: 12px;
    text-align: center;

    .statVal {
      display: block;
      font-size: 18px;
      font-weight: bold;
      color: #1677ff;
    }
    .statLabel {
      font-size: 12px;
      color: #595959;
      margin-top: 4px;
    }
  }
}

// 标签样式重构
.tagGroups {
  display: flex;
  flex-direction: column;
  gap: 12px;

  .tagGroup {
    .tagGroupTitle {
      font-size: 12px;
      color: #8c8c8c;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .tagsList {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
  }
}

.tagBase {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.tagSite {
  @extend .tagBase;
  background: #e6f4ff;
  color: #0958d9;
  border: 1px solid #91caff;
}

.tagAi {
  @extend .tagBase;
  background: #f9f0ff;
  color: #531dab;
  border: 1px solid #d3adf7;
}

.tagWechat {
  @extend .tagBase;
  background: #f6ffed;
  color: #389e0d;
  border: 1px solid #b7eb8f;
}

// 轨迹样式
.journeyList {
  position: relative;
  padding-left: 20px;

  &::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 10px;
    bottom: 10px;
    width: 1px;
    background: #f0f0f0;
  }

  .journeyItem {
    position: relative;
    padding-bottom: 20px;

    &::after {
      content: '';
      position: absolute;
      left: -20px;
      top: 6px;
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: #bfbfbf;
      border: 2px solid #fff;
    }

    &:first-child::after {
      background: #1677ff;
      box-shadow: 0 0 0 4px rgba(22, 119, 255, 0.1);
    }

    .journeyHeader {
      display: flex;
      justify-content: space-between;
      margin-bottom: 4px;

      .jTitle {
        font-weight: 600;
        font-size: 15px;
      }
      .jTime {
        font-size: 12px;
        color: #bfbfbf;
      }
    }
    .jContent {
      font-size: 14px;
      color: #595959;
    }
  }
}

.sourceIconText {
  width: 24px;
  height: 24px;
  background: #f0f5ff;
  color: #1677ff;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
}

.ownerList {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 4px 8px;
  background: #fafafa;
  border-radius: 4px;

  .ownerLabel {
    font-size: 12px;
    color: #8c8c8c;
  }

  .ownerItem {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #595959;
  }
}

// 底部按钮
.loadMore {
  width: 100%;
  margin-top: 12px;
  border-radius: 8px;
  height: 36px;
  font-size: 14px;
}

.searchWrapper {
  margin-bottom: 16px;
  :global(.adm-search-bar) {
    --background: #f5f5f5;
  }
}

.titleActions {
  display: flex;
  gap: 12px;

  .actionBtn {
    font-size: 13px;
    color: #1677ff;
    display: flex;
    align-items: center;
    gap: 4px;
  }
}
