.container {
  min-height: 100vh;
  background: #fafafa;
  padding: 20px;
  padding-bottom: 80px;
}

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

  .headerLeft {
    flex: 1;
  }

  .logoArea {
    display: flex;
    align-items: flex-start;
    gap: 16px;
  }

  .logo {
    width: 64px;
    height: 64px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.08));
  }

  .titleRow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
  }

  .title {
    color: #1d1d1f !important;
    margin-bottom: 0 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
    font-weight: 700;
  }

  .totalBadge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    background: linear-gradient(135deg, #e6f7ff 0%, #bae7ff 100%);
    border: 1px solid #91d5ff;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    color: #0958d9;
    line-height: 1;
    box-shadow: 0 2px 4px rgba(9, 88, 217, 0.1);
  }

  .subtitle {
    color: #6e6e73;
    font-size: 14px;
  }

  .userInfo {
    background: #fff;
    padding: 20px;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.2s ease;
    min-width: 520px;

    .userInfoContent {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 16px;
      padding-bottom: 16px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    }

    .avatarWrapper {
      position: relative;
      flex-shrink: 0;

      .userAvatar {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        border: 2px solid #fff;
      }

      .avatarBadge {
        position: absolute;
        bottom: -2px;
        right: -2px;
        width: 22px;
        height: 22px;
        background: #fff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        font-size: 12px;

        :global {
          .anticon {
            &.anticon-check-circle {
              color: #52c41a;
            }
            &.anticon-setting {
              color: #ff4d4f;
            }
          }
        }
      }
    }

    .userDetails {
      display: flex;
      flex-direction: column;
      gap: 4px;
      flex: 1;
      min-width: 0;

      .userNickname {
        color: #1d1d1f !important;
        font-size: 16px;
        font-weight: 600;
        line-height: 1.3;
      }

      .userUsername {
        color: #6e6e73 !important;
        font-size: 13px;
        line-height: 1.3;
      }

      .userTypeBadge {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 5px 12px;
        background: linear-gradient(135deg, #e6f7ff 0%, #d6f0ff 100%);
        border-radius: 8px;
        border: 1px solid #91caff;
        width: fit-content;
        margin-top: 2px;

        .badgeIcon {
          font-size: 12px;
          color: #1890ff;
        }

        .userTypeText {
          font-size: 12px;
          color: #1890ff;
          font-weight: 500;
          line-height: 1;
        }
      }
    }

    .dropdownTrigger {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: #f5f5f5;
      cursor: pointer;
      transition: all 0.2s ease;
      flex-shrink: 0;

      &:hover {
        background: #e8e8e8;
        transform: scale(1.05);
      }

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

      .dropdownIcon {
        font-size: 18px;
        color: #595959;
        font-weight: 600;
      }
    }

    .userStatsRow {
      display: flex;
      align-items: center;
      justify-content: space-around;
      gap: 12px;

      .statItem {
        flex: 1;
        text-align: center;
        padding: 8px 4px;
        border-radius: 8px;
        background: #fafafa;

        .statValue {
          font-size: 18px;
          font-weight: 700;
          color: #1890ff;
          line-height: 1.3;
          margin-bottom: 2px;
        }

        .statLabel {
          font-size: 11px;
          color: #8c8c8c;
          font-weight: 500;
        }
      }

      .statDivider {
        width: 1px;
        height: 24px;
        background: #e8e8e8;
      }
    }
  }
}

.statsCard {
  margin-bottom: 24px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  box-shadow:
    0 2px 12px rgba(0, 0, 0, 0.05),
    0 1px 4px rgba(0, 0, 0, 0.03),
    0 0 0 1px rgba(0, 0, 0, 0.03);
  border: 0.5px solid rgba(0, 0, 0, 0.04);

  :global {
    .ant-statistic-title {
      font-size: 13px;
      margin-bottom: 4px;
    }
  }
}

.typeSection {
  margin-bottom: 24px;

  .sectionTitle {
    color: #1d1d1f !important;
    margin-bottom: 16px !important;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 18px !important;

    :global {
      .anticon {
        font-size: 20px;
        color: #1890ff;
      }
    }
  }
}

.progressSection {
  margin-bottom: 24px;

  .sectionTitle {
    color: #1d1d1f !important;
    margin-bottom: 16px !important;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 18px !important;
  }

  .progressCard {
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    height: 100%;

    &:hover {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

    :global {
      .ant-card-body {
        padding: 20px;
      }
    }

    .progressCardContent {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .progressIcon {
      width: 56px;
      height: 56px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .progressInfo {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 2px;

      .progressLabel {
        font-size: 12px;
        line-height: 1;
      }

      .progressValue {
        margin: 4px 0 0 0 !important;
        font-size: 28px !important;
        font-weight: 700;
        line-height: 1;
        color: #1d1d1f;
      }
    }
  }
}

.typeCard {
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  box-shadow:
    0 2px 12px rgba(0, 0, 0, 0.05),
    0 1px 4px rgba(0, 0, 0, 0.03),
    0 0 0 1px rgba(0, 0, 0, 0.03);
  border: 0.5px solid rgba(0, 0, 0, 0.04);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  height: 100%;

  &:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.95);
    box-shadow:
      0 8px 32px rgba(0, 0, 0, 0.08),
      0 4px 16px rgba(0, 0, 0, 0.04),
      0 0 0 1px rgba(0, 0, 0, 0.04);
  }

  .typeIconWrapper {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    border: 1.5px solid;
    transition: all 0.3s ease;
  }

  .typeIcon {
    font-size: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .typeTitle {
    margin: 6px 0 4px 0 !important;
    color: #1d1d1f;
    font-weight: 600;
    font-size: 16px !important;
  }

  .typeDesc {
    margin: 0 !important;
    color: #6e6e73;
    font-size: 12px;
  }
}

.quickStart {
  .sectionTitle {
    color: #1d1d1f !important;
    margin-bottom: 16px !important;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 18px !important;

    :global {
      .anticon {
        font-size: 20px;
        color: #73d13d;
      }
    }
  }

  .quickCard {
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    box-shadow:
      0 2px 12px rgba(0, 0, 0, 0.05),
      0 1px 4px rgba(0, 0, 0, 0.03),
      0 0 0 1px rgba(0, 0, 0, 0.03);
    border: 0.5px solid rgba(0, 0, 0, 0.04);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;

    &:hover {
      transform: translateY(-4px);
      background: rgba(255, 255, 255, 0.95);
      box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.08),
        0 4px 16px rgba(0, 0, 0, 0.04),
        0 0 0 1px rgba(0, 0, 0, 0.04);
    }
  }

  .quickIconWrapper {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1.5px solid;
    transition: all 0.3s ease;
  }

  .quickIcon {
    font-size: 28px;
  }
}

.rankingSection {
  margin-top: 32px;
  margin-bottom: 24px;

  .sectionTitle {
    color: #1d1d1f !important;
    margin-bottom: 16px !important;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 18px !important;

    :global {
      .anticon {
        font-size: 20px;
        color: #faad14;
      }
    }
  }

  .rankingCard {
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    box-shadow:
      0 2px 12px rgba(0, 0, 0, 0.05),
      0 1px 4px rgba(0, 0, 0, 0.03),
      0 0 0 1px rgba(0, 0, 0, 0.03);
    border: 0.5px solid rgba(0, 0, 0, 0.04);

    :global {
      .ant-card-body {
        padding: 20px;
      }
    }
  }

  .rankingList {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .rankingItem {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: #fafafa;
    border-radius: 12px;
    transition: all 0.2s ease;

    &:hover {
      background: #f0f0f0;
      transform: translateX(4px);
    }
  }

  .rankingLeft {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
  }

  .rankBadge {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    flex-shrink: 0;

    &.rank1 {
      background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
      color: #fff;
      box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4);
    }

    &.rank2 {
      background: linear-gradient(135deg, #c0c0c0 0%, #e8e8e8 100%);
      color: #fff;
      box-shadow: 0 4px 12px rgba(192, 192, 192, 0.4);
    }

    &.rank3 {
      background: linear-gradient(135deg, #cd7f32 0%, #e8a87c 100%);
      color: #fff;
      box-shadow: 0 4px 12px rgba(205, 127, 50, 0.4);
    }
  }

  .rankNumber {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 600;
    color: #8c8c8c;
    background: #f0f0f0;
    flex-shrink: 0;
  }

  .rankAvatar {
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }

  .rankUserInfo {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .rankNickname {
    font-size: 15px;
    font-weight: 600;
    color: #1d1d1f;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .rankUsername {
    font-size: 12px;
    color: #8c8c8c;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .rankingRight {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
  }

  .rankStat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }

  .rankStatValue {
    font-size: 18px;
    font-weight: 700;
    color: #1890ff;
    line-height: 1;
  }

  .rankStatLabel {
    font-size: 12px;
    color: #8c8c8c;
    line-height: 1;
  }

  .rankDivider {
    width: 1px;
    height: 36px;
    background: #e8e8e8;
  }
}

// 响应式设计 - 移动端 (< 768px)
@media (max-width: 768px) {
  .container {
    padding: 12px;
    padding-bottom: 70px;
  }

  .header {
    flex-direction: column;
    align-items: stretch;
    margin-bottom: 16px;

    .headerLeft {
      margin-bottom: 12px;
    }

    .logoArea {
      gap: 12px;
    }

    .logo {
      width: 48px;
      height: 48px;
    }

    .titleRow {
      gap: 8px;
      flex-wrap: wrap;
    }

    .title {
      font-size: 22px !important;
    }

    .totalBadge {
      padding: 3px 8px;
      font-size: 12px;
      border-radius: 16px;
    }

    .subtitle {
      font-size: 13px;
    }

    .userInfo {
      width: 100%;
      min-width: auto;
      padding: 16px;
      border-radius: 12px;

      .userInfoContent {
        gap: 12px;
        margin-bottom: 12px;
        padding-bottom: 12px;
      }

      .avatarWrapper {
        .userAvatar {
          width: 48px !important;
          height: 48px !important;
        }

        .avatarBadge {
          width: 20px;
          height: 20px;
          font-size: 11px;
          bottom: -1px;
          right: -1px;
        }
      }

      .userDetails {
        gap: 3px;

        .userNickname {
          font-size: 15px !important;
        }

        .userUsername {
          font-size: 12px !important;
        }

        .userTypeBadge {
          padding: 3px 8px;
          margin-top: 1px;

          .badgeIcon {
            font-size: 10px;
          }

          .userTypeText {
            font-size: 10px;
          }
        }
      }

      .dropdownTrigger {
        width: 28px;
        height: 28px;

        .dropdownIcon {
          font-size: 16px;
        }
      }

      .userStatsRow {
        gap: 8px;

        .statItem {
          padding: 6px 4px;
          border-radius: 6px;

          .statValue {
            font-size: 16px;
          }

          .statLabel {
            font-size: 10px;
          }
        }

        .statDivider {
          height: 20px;
        }
      }
    }
  }

  .statsCard {
    margin-bottom: 16px;

    :global {
      .ant-statistic-title {
        font-size: 12px;
      }

      .ant-statistic-content {
        font-size: 20px !important;
      }
    }
  }

  .typeSection {
    margin-bottom: 16px;

    .sectionTitle {
      font-size: 16px !important;
      margin-bottom: 12px !important;
    }
  }

  .progressSection {
    margin-bottom: 16px;

    .sectionTitle {
      font-size: 16px !important;
      margin-bottom: 12px !important;
    }

    .progressCard {
      border-radius: 12px;

      :global {
        .ant-card-body {
          padding: 16px;
        }
      }

      .progressIcon {
        width: 48px;
        height: 48px;
        border-radius: 10px;

        :global {
          svg {
            font-size: 20px !important;
          }
        }
      }

      .progressInfo {
        .progressLabel {
          font-size: 11px;
        }

        .progressValue {
          font-size: 22px !important;
        }
      }
    }
  }

  .typeCard {
    border-radius: 12px;

    .typeIconWrapper {
      width: 56px;
      height: 56px;
      border-radius: 12px;
      margin-bottom: 10px;
    }

    .typeIcon {
      font-size: 28px;
    }

    .typeTitle {
      font-size: 14px !important;
    }

    .typeDesc {
      font-size: 11px;
    }
  }

  .quickStart {
    .sectionTitle {
      font-size: 16px !important;
      margin-bottom: 12px !important;
    }

    .quickCard {
      border-radius: 12px;

      :global {
        .ant-space {
          gap: 12px !important;
        }

        h5 {
          font-size: 14px !important;
        }

        .ant-typography {
          font-size: 12px !important;
        }
      }
    }

    .quickIconWrapper {
      width: 48px;
      height: 48px;
      border-radius: 12px;
    }

    .quickIcon {
      font-size: 24px;
    }
  }

  .rankingSection {
    margin-top: 24px;
    margin-bottom: 16px;

    .sectionTitle {
      font-size: 16px !important;
      margin-bottom: 12px !important;
    }

    .rankingCard {
      border-radius: 12px;

      :global {
        .ant-card-body {
          padding: 14px;
        }
      }
    }

    .rankingList {
      gap: 8px;
    }

    .rankingItem {
      padding: 12px 14px;
      border-radius: 10px;
    }

    .rankingLeft {
      gap: 12px;
    }

    .rankBadge {
      width: 30px;
      height: 30px;
      font-size: 15px;
    }

    .rankNumber {
      width: 30px;
      height: 30px;
      font-size: 13px;
    }

    .rankAvatar {
      width: 38px !important;
      height: 38px !important;
    }

    .rankUserInfo {
      gap: 3px;
    }

    .rankNickname {
      font-size: 13px;
    }

    .rankUsername {
      font-size: 11px;
    }

    .rankingRight {
      gap: 14px;
    }

    .rankStat {
      gap: 3px;
    }

    .rankStatValue {
      font-size: 15px;
    }

    .rankStatLabel {
      font-size: 10px;
    }

    .rankDivider {
      height: 30px;
    }
  }
}

// 响应式设计 - 平板 (769px - 1024px)
@media (min-width: 769px) and (max-width: 1024px) {
  .container {
    padding: 24px;
    padding-bottom: 80px;
  }

  .header {
    .title {
      font-size: 28px !important;
    }

    .userInfo {
      min-width: 450px;

      .avatarWrapper .userAvatar {
        width: 52px !important;
        height: 52px !important;
      }

      .userStatsRow .statItem {
        .statValue {
          font-size: 17px;
        }
      }
    }
  }

  .typeCard {
    .typeIconWrapper {
      width: 60px;
      height: 60px;
      border-radius: 14px;
    }

    .typeIcon {
      font-size: 30px;
    }
  }

  .progressSection {
    .sectionTitle {
      font-size: 17px !important;
    }
  }

  .rankingSection {
    margin-top: 28px;

    .sectionTitle {
      font-size: 17px !important;
    }
  }
}

// 响应式设计 - PC端宽屏 (> 1025px)
@media (min-width: 1025px) {
  .container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 32px 40px;
    padding-bottom: 80px;
  }

  .header {
    margin-bottom: 32px;

    .title {
      font-size: 32px !important;
    }

    .subtitle {
      font-size: 15px;
    }

    .userInfo {
      min-width: 560px;

      .avatarWrapper .userAvatar {
        width: 60px !important;
        height: 60px !important;
      }

      .userDetails {
        .userNickname {
          font-size: 17px !important;
        }

        .userUsername {
          font-size: 14px !important;
        }

        .userTypeBadge {
          padding: 5px 12px;

          .badgeIcon {
            font-size: 12px;
          }

          .userTypeText {
            font-size: 12px;
          }
        }
      }

      .userStatsRow .statItem {
        .statValue {
          font-size: 20px;
        }

        .statLabel {
          font-size: 12px;
        }
      }
    }
  }

  .statsCard {
    margin-bottom: 32px;
  }

  .typeSection {
    margin-bottom: 32px;

    .sectionTitle {
      font-size: 20px !important;
    }
  }

  .progressSection {
    margin-bottom: 32px;

    .sectionTitle {
      font-size: 20px !important;
    }
  }

  .quickStart {
    .sectionTitle {
      font-size: 20px !important;
    }
  }

  .rankingSection {
    margin-top: 36px;
    margin-bottom: 32px;

    .sectionTitle {
      font-size: 20px !important;
    }
  }
}

// 响应式设计 - 超宽屏 (> 1600px)
@media (min-width: 1600px) {
  .container {
    max-width: 1600px;
  }
}