.wechat-account-detail-page {
  padding: 16px;

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

  .account-card {
    margin-bottom: 16px;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid #e8f4fd;

    .account-info {
      display: flex;
      align-items: flex-start;
      gap: 16px;
      padding: 20px;

      .avatar-section {
        position: relative;

        .avatar {
          width: 64px;
          height: 64px;
          border-radius: 50%;
          border: 4px solid #e8f4fd;
        }

        .status-dot {
          position: absolute;
          bottom: 2px;
          right: 2px;
          width: 16px;
          height: 16px;
          border-radius: 50%;
          border: 2px solid #fff;

          &.status-normal {
            background: #52c41a;
          }

          &.status-abnormal {
            background: #ff4d4f;
          }
        }
      }

      .info-section {
        flex: 1;
        min-width: 0;

        .name-row {
          display: flex;
          align-items: center;
          gap: 8px;
          margin-bottom: 4px;

          .nickname {
            font-size: 20px;
            font-weight: 600;
            color: #1a1a1a;
            margin: 0;
            max-width: 200px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .status-tag {
            font-size: 12px;
            padding: 2px 8px;
            border-radius: 12px;
          }
        }

        .wechat-id {
          font-size: 14px;
          color: #666;
          margin: 0 0 12px 0;
        }

        .action-buttons {
          display: flex;
          gap: 8px;
          flex-wrap: wrap;

          .action-btn {
            font-size: 12px;
            padding: 6px 12px;
            border-radius: 8px;
            border: 1px solid #d9d9d9;
            background: #fff;
            color: #666;
            transition: all 0.2s;

            &:hover {
              background: #f5f5f5;
              border-color: #bfbfbf;
            }
          }
        }
      }
    }
  }

  .tabs-card {
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid #e8f4fd;

    .tabs {
      .adm-tabs-header {
        border-bottom: 1px solid #e8e8e8;
        background: #fff;
        border-radius: 16px 16px 0 0;

        .adm-tabs-tab {
          font-size: 14px;
          font-weight: 500;
          color: #666;
          transition: all 0.2s;

          &.adm-tabs-tab-active {
            color: #1677ff;
            font-weight: 600;
          }
        }

        .adm-tabs-tab-line {
          background: #1677ff;
          height: 2px;
        }
      }

      .adm-tabs-content {
        padding: 16px;
      }
    }
  }

  .overview-content {
    // 健康分评估区域
    .health-score-section {
      background: #ffffff;
      border-radius: 12px;
      padding: 16px;
      margin-bottom: 16px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);

      .health-score-title {
        font-size: 16px;
        font-weight: 600;
        color: #333;
        margin-bottom: 12px;
      }

      .health-score-info {
        .health-score-status {
          display: flex;
          justify-content: space-between;
          margin-bottom: 12px;

          .status-tag {
            background: #ffebeb;
            color: #ff4d4f;
            font-size: 12px;
            padding: 2px 8px;
            border-radius: 4px;
          }

          .status-time {
            font-size: 12px;
            color: #999;
          }
        }

        .health-score-display {
          display: flex;
          align-items: center;

          .score-circle-wrapper {
            width: 100px;
            height: 100px;
            margin-right: 24px;
            position: relative;

            .score-circle {
              width: 100%;
              height: 100%;
              border-radius: 50%;
              background: #fff;
              border: 8px solid #ff4d4f;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;

              .score-number {
                font-size: 28px;
                font-weight: 700;
                color: #ff4d4f;
                line-height: 1;
              }

              .score-label {
                font-size: 12px;
                color: #999;
                margin-top: 4px;
              }
            }
          }

          .health-score-stats {
            flex: 1;

            .stats-row {
              display: flex;
              justify-content: space-between;
              margin-bottom: 8px;

              .stats-label {
                font-size: 14px;
                color: #666;
              }

              .stats-value {
                font-size: 14px;
                color: #333;
                font-weight: 500;
              }
            }
          }
        }
      }
    }

    // 账号统计卡片网格
    .account-stats-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-bottom: 16px;

      .stat-card {
        background: #ffffff;
        padding: 16px;
        border-radius: 12px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);

        .stat-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 8px;

          .stat-title {
            font-size: 14px;
            color: #666;
          }

          .stat-icon-up {
            width: 20px;
            height: 20px;
            background: #f0f0f0;
            border-radius: 50%;
            position: relative;

            &::before {
              content: '';
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%) rotate(-45deg);
              width: 8px;
              height: 8px;
              border-top: 2px solid #722ed1;
              border-right: 2px solid #722ed1;
            }
          }

          .stat-icon-plus {
            width: 20px;
            height: 20px;
            background: #f0f0f0;
            border-radius: 50%;
            position: relative;

            &::before {
              content: '';
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              width: 10px;
              height: 2px;
              background: #52c41a;
            }

            &::after {
              content: '';
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              width: 2px;
              height: 10px;
              background: #52c41a;
            }
          }

          .stat-icon-people {
            width: 20px;
            height: 20px;
            background: #f0f0f0;
            border-radius: 50%;
            position: relative;

            &::before {
              content: '';
              position: absolute;
              top: 6px;
              left: 7px;
              width: 6px;
              height: 6px;
              border-radius: 50%;
              background: #1677ff;
            }

            &::after {
              content: '';
              position: absolute;
              top: 13px;
              left: 5px;
              width: 10px;
              height: 5px;
              border-radius: 10px 10px 0 0;
              background: #1677ff;
          }
        }

          .stat-icon-chat {
            width: 20px;
            height: 20px;
            background: #f0f0f0;
            border-radius: 50%;
            position: relative;

            &::before {
              content: '';
              position: absolute;
              top: 6px;
              left: 6px;
              width: 8px;
              height: 8px;
              border-radius: 2px;
              background: #fa8c16;
            }
          }
        }

        .stat-value {
          font-size: 20px;
          font-weight: 600;
          color: #333;
        }

        .stat-value-positive {
          font-size: 20px;
          font-weight: 600;
          color: #52c41a;
        }

        .stat-value-negative {
          font-size: 20px;
          font-weight: 600;
          color: #ff4d4f;
        }
      }
    }

    .weight-card {
      background: linear-gradient(135deg, #fff7e6, #fff2d9);
      padding: 20px;
      border-radius: 12px;
      border: 1px solid #ffd591;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
      margin-bottom: 16px;
      transition: all 0.3s;

      &:hover {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        transform: translateY(-1px);
      }

      .weight-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;

        .weight-icon {
          font-size: 16px;
          color: #fa8c16;
          margin-right: 8px;
        }

        .weight-title {
          flex: 1;
          font-size: 14px;
          font-weight: 600;
          color: #fa8c16;
        }

        .weight-score {
          display: flex;
          align-items: center;
          gap: 4px;
          padding: 6px 12px;
          border-radius: 16px;
          font-weight: 600;

          &.text-green-600 {
            background: #f6ffed;
            color: #52c41a;
          }

          &.text-yellow-600 {
            background: #fffbe6;
            color: #fa8c16;
          }

          &.text-red-600 {
            background: #fff2f0;
            color: #ff4d4f;
          }

          .score-value {
            font-size: 20px;
            font-weight: 700;
          }

          .score-unit {
            font-size: 12px;
          }
        }
      }

      .weight-description {
        font-size: 12px;
        color: #fa8c16;
        background: #fff7e6;
        padding: 8px 12px;
        border-radius: 8px;
        border: 1px solid #ffd591;
        margin-bottom: 16px;
      }

      .weight-items {
        .weight-item {
          display: flex;
          align-items: center;
          margin-bottom: 12px;

          .item-label {
            flex-shrink: 0;
            width: 64px;
            font-size: 12px;
            font-weight: 500;
            color: #fa8c16;
          }

          .progress-bar {
            flex: 1;
            margin: 0 12px;
            height: 8px;
            background: #ffd591;
            border-radius: 4px;
            overflow: hidden;

            .progress-fill {
              height: 100%;
              background: linear-gradient(90deg, #fa8c16, #ffa940);
              border-radius: 4px;
              transition: width 0.5s ease;
            }
          }

          .item-value {
            flex-shrink: 0;
            width: 40px;
            font-size: 12px;
            font-weight: 500;
            color: #fa8c16;
            text-align: right;
          }
        }
      }
    }

    .restrictions-card {
      background: linear-gradient(135deg, #fff2f0, #fff1f0);
      padding: 16px;
      border-radius: 12px;
      border: 1px solid #ffccc7;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

      .restrictions-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;

        .restrictions-icon {
          font-size: 16px;
          color: #ff4d4f;
          margin-right: 8px;
        }

        .restrictions-title {
          flex: 1;
          font-size: 14px;
          font-weight: 600;
          color: #ff4d4f;
        }

        .restrictions-btn {
          font-size: 12px;
          padding: 4px 8px;
          border-radius: 6px;
        }
      }

      .restrictions-list {
        .restriction-item {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 8px 0;
          border-bottom: 1px solid #ffccc7;

          &:last-child {
            border-bottom: none;
          }

          .restriction-info {
            flex: 1;

            .restriction-reason {
              display: block;
              font-size: 12px;
              color: #333;
              margin-bottom: 2px;
            }

            .restriction-date {
              font-size: 10px;
              color: #666;
            }
          }

          .restriction-level {
            font-size: 10px;
            padding: 2px 6px;
            border-radius: 8px;
            font-weight: 500;

            &.text-red-600 {
              background: #fff2f0;
              color: #ff4d4f;
            }

            &.text-yellow-600 {
              background: #fffbe6;
              color: #fa8c16;
            }

            &.text-gray-600 {
              background: #f5f5f5;
              color: #666;
            }
          }
        }
      }
    }
  }

  .friends-content {
    .search-bar {
      display: flex;
      gap: 8px;
      margin-bottom: 16px;

      .search-input-wrapper {
        flex: 1;

        .adm-input {
          border-radius: 8px;
          border: 1px solid #d9d9d9;
        }
      }

      .search-btn {
        padding: 8px 12px;
        border-radius: 8px;
      }

      .refresh-btn {
        padding: 8px 12px;
        border-radius: 8px;
        border: 1px solid #d9d9d9;
        background: #fff;
        color: #666;
        transition: all 0.2s;

        &:hover {
          background: #f5f5f5;
          border-color: #bfbfbf;
        }
      }
    }

    .friends-summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #f5f9ff;
      border: 1px solid #e0edff;
      border-radius: 10px;
      padding: 12px 16px;
      margin-bottom: 16px;

      .summary-item {
        display: flex;
        flex-direction: column;
        gap: 4px;
      }

      .summary-label {
        font-size: 12px;
        color: #666;
      }

      .summary-value {
        font-size: 20px;
        font-weight: 600;
        color: #111;
      }

      .summary-value-highlight {
        font-size: 20px;
        font-weight: 600;
        color: #fa541c;
      }

      .summary-divider {
        width: 1px;
        height: 32px;
        background: #e6e6e6;
        margin: 0 12px;
      }
    }

    .friends-list {
      .empty {
        text-align: center;
        color: #999;
        padding: 40px 0;
        font-size: 14px;
      }

      .error {
        text-align: center;
        color: #ff4d4f;
        padding: 40px 0;

        p {
          margin-bottom: 12px;
        }
      }

      .friend-card {
        display: flex;
        align-items: flex-start;
        padding: 16px;
        background: #fff;
        border: 1px solid #f0f0f0;
        border-radius: 12px;
        margin-bottom: 12px;
        gap: 12px;
        transition: all 0.2s;
        cursor: pointer;

        &:active {
          background: #f8f9fa;
          border-color: #1677ff;
          transform: scale(0.98);
        }
      }

      .friend-avatar {
        flex-shrink: 0;
        width: 52px;
        height: 52px;

        .adm-avatar {
          width: 52px;
          height: 52px;
        border-radius: 50%;
          border: 2px solid #f0f0f0;
        }
      }

      .friend-main {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
      }

      .friend-header {
          display: flex;
          align-items: center;
        justify-content: space-between;
        gap: 12px;
      }

          .friend-name {
        font-size: 16px;
        font-weight: 600;
        color: #111;
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .friend-value {
        flex-shrink: 0;

        .value-amount {
          font-size: 15px;
          font-weight: 600;
          color: #fa541c;
          white-space: nowrap;
        }
      }

      .friend-info {
        display: flex;
        flex-direction: column;
        gap: 4px;
          }

      .friend-info-item {
        font-size: 13px;
        color: #666;
        display: flex;
        align-items: center;
        gap: 4px;

        .info-label {
        color: #999;
          flex-shrink: 0;
        }

        .info-value {
          color: #666;
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        }

      .friend-tags {
          display: flex;
          flex-wrap: wrap;
        gap: 6px;
        margin-top: 4px;
      }

      .friend-tag {
        font-size: 11px;
        padding: 4px 10px;
        border-radius: 12px;
        background: #f0f7ff;
        color: #1677ff;
        font-weight: 500;
        white-space: nowrap;
      }
    }

    .loading-more {
      display: flex;
      justify-content: center;
      padding: 16px 0;
    }
  }
}

.popup-content {
  padding: 20px;
  max-height: 80vh;
  overflow-y: auto;

  .popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;

    h3 {
      font-size: 18px;
      font-weight: 600;
      color: #333;
      margin: 0;
    }
  }

  .popup-description {
    font-size: 14px;
    color: #666;
    margin-bottom: 16px;
    line-height: 1.5;
  }

  .transfer-form {
    margin-top: 20px;

    .form-item {
      margin-bottom: 16px;

      .form-label {
        font-size: 14px;
        font-weight: 500;
        color: #333;
        margin-bottom: 8px;
      }

      .form-control {
        width: 100%;
      }

      .form-control-switch {
        display: flex;
        align-items: center;

        .switch-label {
          margin-left: 8px;
          font-size: 14px;
          color: #666;
        }
      }
    }
  }

  .popup-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 20px;
  }

  .popup-footer {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid #f0f0f0;
  }

      .friend-info-card {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px;
        background: #f5f5f5;
        border-radius: 8px;

        .friend-info-text {
          flex: 1;

          .friend-info-name {
            font-size: 14px;
            font-weight: 500;
            color: #333;
            margin-bottom: 4px;
          }

          .friend-info-id {
            font-size: 12px;
            color: #999;
          }
        }
      }

      .loading-accounts,
      .empty-accounts {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
        color: #999;
        font-size: 14px;
      }

      .kefu-accounts-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
        max-height: 300px;
        overflow-y: auto;

        .kefu-account-item {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 12px;
          border: 1px solid #e0e0e0;
          border-radius: 8px;
          cursor: pointer;
          transition: all 0.2s;
          background: white;

          &:hover {
            border-color: #1677ff;
            background: #f0f7ff;
          }

          &.selected {
            border-color: #1677ff;
            background: #e6f4ff;
          }

          .account-info {
            flex: 1;

            .account-name {
              font-size: 14px;
              font-weight: 500;
              color: #333;
              margin-bottom: 4px;
            }

            .account-id {
              font-size: 12px;
              color: #999;
            }
          }

          .selected-icon {
            color: #1677ff;
            font-size: 18px;
            font-weight: bold;
          }
        }
      }

  .export-form {
    margin-top: 20px;

    .form-item {
      margin-bottom: 20px;

      label {
        display: block;
        font-size: 14px;
        font-weight: 500;
        color: #333;
        margin-bottom: 8px;
      }

      .type-selector {
        display: flex;
        gap: 8px;
        width: 100%;

        .type-option {
          flex: 1;
          padding: 8px 16px;
          border: 1px solid #e0e0e0;
          border-radius: 8px;
          font-size: 14px;
          color: #666;
          cursor: pointer;
          transition: all 0.2s;
          background: white;
          text-align: center;

          &:hover {
            border-color: #1677ff;
            color: #1677ff;
          }

          &.active {
            background: #1677ff;
            border-color: #1677ff;
            color: white;
          }
        }
      }
    }
  }

  .restrictions-detail {
    .restriction-detail-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 0;
      border-bottom: 1px solid #f0f0f0;

      &:last-child {
        border-bottom: none;
      }

      .restriction-detail-info {
        flex: 1;

        .restriction-detail-reason {
          font-size: 14px;
          color: #333;
          margin-bottom: 4px;
        }

        .restriction-detail-date {
          font-size: 12px;
          color: #666;
        }
      }

      .restriction-detail-level {
        font-size: 12px;
        padding: 4px 8px;
        border-radius: 8px;
        font-weight: 500;

        &.text-red-600 {
          background: #fff2f0;
          color: #ff4d4f;
        }

        &.text-yellow-600 {
          background: #fffbe6;
          color: #fa8c16;
        }

        &.text-gray-600 {
          background: #f5f5f5;
          color: #666;
        }
      }
    }
  }
}

.pagination-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 0;
  margin-top: 16px;
  border-top: 1px solid #f0f0f0;
}

.summary-grid {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
}
.summary-item {
  flex: 1;
  background: #fafbfc;
  border-radius: 10px;
  padding: 16px 0 8px 0;
  text-align: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.summary-value {
  font-size: 24px;
  font-weight: 600;
  color: #222;
  margin-bottom: 2px;
}
.summary-value-green {
  font-size: 24px;
  font-weight: 600;
  color: #27ae60;
  margin-bottom: 2px;
}
.summary-value-blue {
  font-size: 24px;
  font-weight: 600;
  color: #3498db;
  margin-bottom: 2px;
}
.summary-label {
  font-size: 13px;
  color: #888;
}
.summary-progress-row {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #666;
  margin-bottom: 4px;
  gap: 8px;
}
.summary-progress-text {
  font-weight: 500;
  color: #222;
}
.summary-progress-bar {
  width: 100%;
  margin-bottom: 16px;
}
.progress-bg {
  width: 100%;
  height: 8px;
  background: #f0f0f0;
  border-radius: 6px;
  overflow: hidden;
}
.progress-fill {
  height: 8px;
  background: #3498db;
  border-radius: 6px 0 0 6px;
  transition: width 0.3s;
}
.device-card {
  background: #fafbfc;
  border-radius: 10px;
  padding: 16px;
  margin-top: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.device-title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #222;
}
.device-row {
  display: flex;
  align-items: center;
  font-size: 14px;
  margin-bottom: 4px;
}
.device-label {
  color: #888;
  min-width: 70px;
  margin-right: 8px;
}

.health-content {
    padding: 16px 0;
    height: 500px;
    overflow-y: auto;

    // 健康分评估区域
    .health-score-section {
      background: #ffffff;
      border-radius: 12px;
      padding: 16px;
      margin-bottom: 16px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);

      .health-score-title {
        font-size: 16px;
        font-weight: 600;
        color: #333;
        margin-bottom: 12px;
      }

      .health-score-info {
        .health-score-status {
          display: flex;
          justify-content: space-between;
          margin-bottom: 12px;

          .status-tag {
            background: #ffebeb;
            color: #ff4d4f;
            font-size: 12px;
            padding: 2px 8px;
            border-radius: 4px;
          }

          .status-time {
            font-size: 12px;
            color: #999;
          }
        }

        .health-score-display {
          display: flex;
          align-items: center;

          .score-circle-wrapper {
            width: 100px;
            height: 100px;
            margin-right: 24px;
            position: relative;

            .score-circle {
              width: 100%;
              height: 100%;
              border-radius: 50%;
              background: #fff;
              border: 8px solid #ff4d4f;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;

              .score-number {
                font-size: 28px;
                font-weight: 700;
                color: #ff4d4f;
                line-height: 1;
              }

              .score-label {
                font-size: 12px;
                color: #999;
                margin-top: 4px;
              }
            }
          }

          .health-score-stats {
            flex: 1;

            .stats-row {
              display: flex;
              justify-content: space-between;
              margin-bottom: 8px;

              .stats-label {
                font-size: 14px;
                color: #666;
              }

              .stats-value {
                font-size: 14px;
                color: #333;
                font-weight: 500;
              }
            }
          }
        }
      }
    }

    .health-score-card {
      background: #ffffff;
      border-radius: 12px;
      padding: 16px;
      margin-bottom: 16px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);

      .health-score-status {
        display: flex;
        justify-content: space-between;
        margin-bottom: 12px;

        .status-tag {
          background: #ffebeb;
          color: #ff4d4f;
          font-size: 12px;
          padding: 2px 8px;
          border-radius: 4px;
        }

        .status-time {
          font-size: 12px;
          color: #999;
        }
      }

      .health-score-display {
        display: flex;
        align-items: center;

        .score-circle-wrapper {
          width: 100px;
          height: 100px;
          margin-right: 24px;
          position: relative;

          .score-circle {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: #fff;
            border: 8px solid #ff4d4f;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            .score-number {
              font-size: 28px;
              font-weight: 700;
              color: #ff4d4f;
              line-height: 1;
            }

            .score-label {
              font-size: 12px;
              color: #999;
              margin-top: 4px;
            }
          }
        }

        .health-score-stats {
          flex: 1;

          .stats-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;

            .stats-label {
              font-size: 14px;
              color: #666;
            }

            .stats-value {
              font-size: 14px;
              color: #333;
              font-weight: 500;
            }
          }
        }
      }
    }

    .health-section {
      background: #ffffff;
      border-radius: 12px;
      padding: 16px;
      margin-bottom: 16px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);

      .health-section-title {
        font-size: 16px;
        font-weight: 600;
        color: #ff8800;
        margin-bottom: 12px;
        position: relative;
        padding-left: 12px;

        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 4px;
          height: 16px;
          background: #ff8800;
          border-radius: 2px;
        }
      }

      .health-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid #f5f5f5;

        &:last-child {
          border-bottom: none;
        }

        .health-item-label {
          font-size: 14px;
          color: #333;
          display: flex;
          align-items: center;

          .health-item-icon-warning {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: #ffebeb;
            margin-right: 8px;
            position: relative;

            &::before {
              content: '!';
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              color: #ff4d4f;
              font-size: 12px;
              font-weight: bold;
            }
          }

          .health-item-tag {
            background: #fff7e6;
            color: #fa8c16;
            font-size: 12px;
            padding: 2px 6px;
            border-radius: 4px;
            margin-left: 8px;
          }
        }

        .health-item-value-positive {
          font-size: 14px;
          font-weight: 600;
          color: #52c41a;
        }

        .health-item-value-negative {
          font-size: 14px;
          font-weight: 600;
          color: #ff4d4f;
        }

        .health-item-value-empty {
          width: 20px;
        }
      }

      .health-empty {
        text-align: center;
        color: #999;
        font-size: 14px;
        padding: 20px 0;
      }
    }
}

    .moments-action-bar {
      display: flex;
      justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: white;
  border-bottom: 1px solid #f0f0f0;

      .action-button, .action-button-dark {
        display: flex;
        align-items: center;
        justify-content: center;
    width: 40px;
        height: 40px;
        border-radius: 8px;
        background: #1677ff;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    color: white;

    &:active {
      background: #0958d9;
      transform: scale(0.95);
        }

    svg {
      font-size: 20px;
          color: white;
        }
      }

      .action-button-dark {
    background: #1677ff;
    color: white;

    &:active {
      background: #0958d9;
      }
    }
}

.moments-content {
    padding: 16px 0;
    height: 500px;
    overflow-y: auto;
    background: #f5f5f5;

    .moments-list {
      padding: 0 16px;

      .moment-item {
        display: flex;
        margin-bottom: 16px;
        background: white;
        border-radius: 8px;
        padding: 16px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);

        .moment-date {
          margin-right: 12px;
          text-align: center;

          .date-day {
            font-size: 20px;
            font-weight: 600;
            color: #333;
            line-height: 1;
          }

          .date-month {
            font-size: 12px;
            color: #999;
            margin-top: 2px;
          }
        }

        .moment-content {
          flex: 1;

          .moment-text {
            font-size: 14px;
            line-height: 1.5;
            color: #333;
            margin-bottom: 8px;
            white-space: pre-wrap; // 保留换行和空格，确保文本完整显示
            word-wrap: break-word; // 长单词自动换行

            .moment-emoji {
              display: inline;
              font-size: 16px;
              vertical-align: middle;
            }
          }

          .moment-images {
            margin-bottom: 8px;

            .image-grid {
              display: grid;
              gap: 4px;
              width: 100%;

              // 1张图片：宽度拉伸，高度自适应
              &.single {
                grid-template-columns: 1fr;

                img {
                  width: 100%;
                  height: auto;
                  max-height: 400px;
                  object-fit: cover;
                  border-radius: 4px;
                }
              }

              // 2张图片：左右并列，1:1比例
              &.double {
                grid-template-columns: 1fr 1fr;

                img {
                  width: 100%;
                  aspect-ratio: 1 / 1;
                  object-fit: cover;
                  border-radius: 4px;
                }
              }

              // 3张图片：三张并列，1:1比例
              &.triple {
                grid-template-columns: 1fr 1fr 1fr;

                img {
                  width: 100%;
                  aspect-ratio: 1 / 1;
                  object-fit: cover;
                  border-radius: 4px;
                }
              }

              // 4张图片：2x2网格布局，1:1比例
              &.quad {
                grid-template-columns: repeat(2, 1fr);

                img {
                  width: 100%;
                  aspect-ratio: 1 / 1;
                  object-fit: cover;
                  border-radius: 4px;
                }
              }

              // 5张及以上：网格布局（9宫格），1:1比例
              &.grid {
                grid-template-columns: repeat(3, 1fr);

                img {
                  width: 100%;
                  aspect-ratio: 1 / 1;
                  object-fit: cover;
                  border-radius: 4px;
                }

                .image-more {
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  background: rgba(0, 0, 0, 0.5);
                  border-radius: 4px;
                  color: white;
                  font-size: 12px;
                  font-weight: 500;
                  aspect-ratio: 1 / 1;
                }
              }
            }
          }

          .moment-footer {
            display: flex;
            justify-content: flex-end;

            .moment-time {
              font-size: 12px;
              color: #999;
            }
          }
        }
      }

      .moments-loading {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 16px 0;
      }

      .moments-no-more {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 16px 0;
      }
    }

    .friends-loading {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px 0;
    }

    .friends-no-more {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px 0;
    }
}

.risk-content {
    padding: 16px 0;
    height: 500px;
    overflow-y: auto;

    .restrictions-list {
      .restriction-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px;
        margin-bottom: 12px;
        background: #fff;
        border-radius: 8px;
        border: 1px solid #f0f0f0;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);

        &:last-child {
          margin-bottom: 0;
        }

        .restriction-info {
          flex: 1;

          .restriction-reason {
            font-size: 14px;
            color: #333;
            font-weight: 500;
            margin-bottom: 4px;
          }

          .restriction-date {
            font-size: 12px;
            color: #999;
          }
        }

        .restriction-level {
          .level-badge {
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 500;

            &.level-1 {
              background: #e8f5e8;
              color: #52c41a;
            }

            &.level-2 {
              background: #fff7e6;
              color: #fa8c16;
            }

            &.level-3 {
              background: #fff2f0;
              color: #ff4d4f;
            }
          }
        }
      }
    }

    .empty {
      text-align: center;
      color: #999;
      font-size: 14px;
      padding: 40px 0;
    }
  }
