.hr-dashboard-container {
  padding: 16px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  min-height: 100vh;
  font-family: 'Roboto', sans-serif;
  font-size: 16px; // 增加全局基础字体大小

  .top-navigation {
    margin-bottom: 20px;
    
    .nav-buttons {
      display: flex;
      gap: 12px;
      justify-content: center;
      flex-wrap: wrap;
      
      .nav-button {
        padding: 12px 24px;
        border-radius: 8px;
        font-weight: 500;
        transition: all 0.2s ease-in-out;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        white-space: nowrap;
        border: 1px solid rgba(33, 150, 243, 0.2);
        
        &:hover {
          transform: translateY(-1px);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
          background-color: rgba(33, 150, 243, 0.08);
        }

        &:active {
          transform: translateY(0);
          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
        }

        &:focus {
          outline: 2px solid rgba(33, 150, 243, 0.3);
          outline-offset: 2px;
        }
        
        &.active {
          background: linear-gradient(45deg, #2196F3, #21CBF3);
          color: white;
          box-shadow: 0 4px 16px rgba(33, 150, 243, 0.3);
          border-color: transparent;
        }
        
        mat-icon {
          margin-right: 8px;
        }
      }
    }
  }

  // 数据可视化页面样式
  .visualization-page {
    display: flex;
    flex-direction: column;
    gap: 20px;

    // 顶部三个图表一排显示
    .top-charts-row {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 16px;
      
      @media (max-width: 1200px) {
        grid-template-columns: 1fr 1fr;
        .chart-card:last-child {
          grid-column: 1 / -1;
        }
      }
      
      @media (max-width: 768px) {
        grid-template-columns: 1fr;
      }
    }

    // 离职原因分析区域占满整行
    .resignation-analysis-section {
      width: 100%;
      
      .analysis-card {
        width: 100%;
      }
    }

      .chart-card {
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        border-radius: 20px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
        border: 1px solid rgba(255, 255, 255, 0.2);

        &:hover {
          transform: translateY(-5px);
          box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
        }

        mat-card-header {
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          color: white;
          border-radius: 20px 20px 0 0;
          padding: 16px;

          mat-card-title {
            display: flex;
            align-items: center;
            font-size: 20px;
            font-weight: 600;
            margin: 0;

            mat-icon {
              margin-right: 10px;
              font-size: 26px;
            }
          }

          mat-card-subtitle {
            color: rgba(255, 255, 255, 0.8);
            margin-top: 5px;
          }
        }

        mat-card-content {
          padding: 20px;
        }
      }

      // 职级分布饼图样式
      .pie-chart-container {
        height: 200px;
        margin-bottom: 20px;
        background: radial-gradient(circle, #f8f9fa 0%, #e9ecef 100%);
        border-radius: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        color: #666;
      }

      .chart-legend {
        display: flex;
        flex-direction: column;
        gap: 10px;

        .legend-item {
          display: flex;
          align-items: center;
          gap: 10px;
          font-size: 14px;

          .legend-color {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            
            &.junior { background: #4CAF50; }
            &.intermediate { background: #FF9800; }
            &.senior { background: #2196F3; }
          }
        }
      }

      // 折线图样式
      .line-chart-container {
        height: 200px;
        margin-bottom: 20px;
        background: radial-gradient(circle, #f8f9fa 0%, #e9ecef 100%);
        border-radius: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        color: #666;
      }

      .key-notes {
        h4 {
          color: #333;
          font-size: 16px;
          margin-bottom: 15px;
          font-weight: 600;
        }

        .note-item {
          display: flex;
          align-items: center;
          gap: 10px;
          margin-bottom: 10px;
          padding: 10px;
          background: rgba(33, 150, 243, 0.1);
          border-radius: 10px;
          border-left: 4px solid #2196F3;

          .note-icon {
            color: #2196F3;
            font-size: 18px;
          }

          .note-text {
            font-size: 14px;
            color: #555;
          }
        }
      }

      // 雷达图样式
      .radar-chart-container {
        height: 200px;
        margin-bottom: 20px;
        background: radial-gradient(circle, #f8f9fa 0%, #e9ecef 100%);
        border-radius: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        color: #666;
      }

      .radar-legend {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;

        .legend-item {
          display: flex;
          align-items: center;
          gap: 8px;
          font-size: 14px;

          .legend-color {
            width: 16px;
            height: 16px;
            border-radius: 50%;
          }
        }
      }

      // 空缺岗位样式
      .vacancy-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 15px;

        .vacancy-item {
          padding: 15px;
          border-radius: 12px;
          border-left: 4px solid;
          transition: all 0.3s ease;

          &.urgent {
            background: rgba(244, 67, 54, 0.1);
            border-left-color: #f44336;
          }

          &.normal {
            background: rgba(76, 175, 80, 0.1);
            border-left-color: #4caf50;
          }

          &:hover {
            transform: translateX(5px);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
          }

          .vacancy-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 8px;

            mat-icon {
              font-size: 20px;
            }

            .position-name {
              font-weight: 600;
              color: #333;
            }
          }

          .vacancy-count {
            font-size: 18px;
            font-weight: 700;
            color: #2196F3;
            margin-bottom: 5px;
          }

          .vacancy-duration {
            font-size: 12px;
            color: #666;
          }
        }
      }
    }

    .right-panel {
      .todo-card {
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        border-radius: 20px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        height: fit-content;

        mat-card-header {
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          color: white;
          border-radius: 20px 20px 0 0;
          padding: 20px;

          .todo-toggle-btn {
            width: 100%;
            background: rgba(255, 255, 255, 0.2);
            color: white;
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 15px;
            padding: 15px 20px;
            font-size: 16px;
            font-weight: 600;
            transition: all 0.3s ease;

            &:hover {
              background: rgba(255, 255, 255, 0.3);
              transform: scale(1.02);
            }

            mat-icon {
              margin-right: 10px;
            }

            .todo-count-chip {
              margin-left: 10px;
              background: rgba(255, 255, 255, 0.9);
              color: #333;
              font-weight: 700;
            }
          }
        }

        mat-card-content {
          padding: 0;
        }

        .todo-list {
          max-height: 600px;
          overflow-y: auto;

          .todo-item {
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;

            &:hover {
              background: rgba(33, 150, 243, 0.05);
            }

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

            &.priority-high {
              border-left: 4px solid #f44336;
            }

            &.priority-medium {
              border-left: 4px solid #ff9800;
            }

            &.priority-low {
              border-left: 4px solid #4caf50;
            }

            .todo-content {
              padding: 20px;

              .todo-header-row {
                display: flex;
                align-items: flex-start;
                gap: 15px;

                .todo-priority-indicator {
                  width: 8px;
                  height: 8px;
                  border-radius: 50%;
                  margin-top: 8px;
                  flex-shrink: 0;
                }

                .todo-main {
                  flex: 1;
                  display: flex;
                  justify-content: space-between;
                  align-items: flex-start;

                  .todo-actions {
                    display: flex;
                    gap: 15px;
                    flex: 1;

                    .todo-info {
                      flex: 1;

                      .todo-title {
                        margin: 0 0 8px 0;
                        font-size: 16px;
                        font-weight: 600;
                        color: #333;
                        transition: all 0.3s ease;

                        &.completed {
                          text-decoration: line-through;
                          color: #999;
                        }
                      }

                      .todo-description {
                        margin: 0 0 12px 0;
                        font-size: 14px;
                        color: #666;
                        line-height: 1.4;
                      }

                      .todo-meta {
                        display: flex;
                        gap: 8px;
                        flex-wrap: wrap;

                        .priority-chip {
                          color: white;
                          font-size: 12px;
                          font-weight: 600;
                          padding: 4px 8px;
                          border-radius: 12px;
                        }

                        .type-chip {
                          background: rgba(33, 150, 243, 0.1);
                          color: #2196F3;
                          font-size: 12px;
                          font-weight: 500;
                          padding: 4px 8px;
                          border-radius: 12px;
                        }
                      }
                    }
                  }

                  .drag-handle {
                    color: #ccc;
                    cursor: grab;
                    padding: 5px;
                    border-radius: 5px;
                    transition: all 0.3s ease;

                    &:hover {
                      color: #999;
                      background: rgba(0, 0, 0, 0.05);
                    }

                    &:active {
                      cursor: grabbing;
                    }
                  }
                }
              }
            }
          }
        }
      }

      // 关键岗位空缺样式
      .vacancy-list {
        .vacancy-item {
          display: flex;
          align-items: center;
          padding: 16px;
          margin-bottom: 12px;
          border-radius: 8px;
          background: #fafafa;
          border-left: 4px solid #e0e0e0;
          transition: all 0.3s ease;
          
          &:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
          }
          
          &.priority-high {
            border-left-color: #f44336;
            background: #ffebee;
          }
          
          &.priority-medium {
            border-left-color: #ff9800;
            background: #fff3e0;
          }
          
          &.priority-low {
            border-left-color: #4caf50;
            background: #e8f5e8;
          }
          
          .vacancy-icon {
            margin-right: 16px;
            
            mat-icon {
              font-size: 32px;
              width: 32px;
              height: 32px;
              color: #666;
            }
          }
          
          .vacancy-info {
            flex: 1;
            
            h4 {
              margin: 0 0 8px 0;
              font-size: 16px;
              font-weight: 500;
              color: #333;
            }
            
            p {
              margin: 0 0 8px 0;
              color: #666;
              font-size: 14px;
            }
            
            .priority-badge {
              padding: 4px 8px;
              border-radius: 12px;
              font-size: 12px;
              font-weight: 500;
              
              &.priority-high {
                background: #ffcdd2;
                color: #c62828;
              }
              
              &.priority-medium {
                background: #ffe0b2;
                color: #ef6c00;
              }
              
              &.priority-low {
                background: #c8e6c9;
                color: #2e7d32;
              }
            }
          }
       }
     }
   }

/* 详情面板覆盖层样式 - 参考财务对账详情面板设计 */
.detail-panel-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
  animation: fadeIn 0.3s ease;

  .detail-panel-container {
    background-color: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: slideIn 0.3s ease;
    border: 1px solid #e2e8f0;
    
    /* 确保在任意缩放比例下都能正常显示 */
    @media (max-width: 768px) {
      width: 95%;
      margin: 10px;
      border-radius: 12px;
    }
    
    /* 处理极小屏幕或高缩放比例 */
    @media (max-width: 480px) {
      width: 100vw;
      height: 100vh;
      border-radius: 0;
      margin: 0;
    }
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideIn {
  from { 
    opacity: 0;
    transform: translateY(-20px);
  }
  to { 
    opacity: 1;
    transform: translateY(0);
  }
}
}

// 全局下拉面板样式修复
::ng-deep .mat-mdc-select-panel {
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(10px) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  max-height: 300px !important;
  
  .mat-mdc-option {
    background: transparent !important;
    color: #333 !important;
    font-size: 16px !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    transition: all 0.2s ease !important;
    
    &:hover {
      background: rgba(0, 122, 255, 0.1) !important;
      color: #007AFF !important;
    }
    
    &.mdc-list-item--selected {
      background: rgba(0, 122, 255, 0.15) !important;
      color: #007AFF !important;
      font-weight: 600 !important;
    }
    
    &:last-child {
      border-bottom: none !important;
    }
  }
}

// 修复时间范围选择器在深色背景下的可见性
::ng-deep .time-range-selector .mat-mdc-select-panel {
  background: rgba(255, 255, 255, 0.95) !important;
  
  .mat-mdc-option {
    color: #333 !important;
    
    &:hover {
      background: rgba(255, 255, 255, 0.8) !important;
      color: #007AFF !important;
    }
    
    &.mdc-list-item--selected {
      background: rgba(0, 122, 255, 0.2) !important;
      color: #007AFF !important;
    }
  }
}



  // 绩效对比表样式
  .performance-comparison-section {
    margin-top: 24px;
    
    .comparison-card {
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.2);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
      border-radius: 16px;
      overflow: hidden;
      
      mat-card-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 20px 24px;
        
        mat-card-title {
          display: flex;
          align-items: center;
          gap: 12px;
          font-size: 20px;
          font-weight: 600;
          margin: 0;
          
          mat-icon {
            font-size: 24px;
            width: 24px;
            height: 24px;
          }
        }
        
        .comparison-actions {
          display: flex;
          align-items: center;
          gap: 16px;
          margin-top: 16px;
          
          mat-button-toggle-group {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 8px;
            
            mat-button-toggle {
              color: white;
              border: none;
              
              &.mat-button-toggle-checked {
                background: rgba(255, 255, 255, 0.2);
                color: white;
              }
              
              mat-icon {
                margin-right: 8px;
              }
            }
          }
          
          .add-comparison-btn {
            background: rgba(255, 255, 255, 0.1);
            color: white;
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 8px;
            
            &:hover {
              background: rgba(255, 255, 255, 0.2);
            }
            
            mat-icon {
              margin-right: 8px;
            }
          }
        }
      }
      
      mat-card-content {
        padding: 20px;
        
        .comparison-selectors {
          display: flex;
          gap: 20px;
          margin-bottom: 20px;
          flex-wrap: wrap;
          
          .selector-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
            min-width: 200px;
            
            label {
              font-weight: 500;
              color: #666;
              font-size: 14px;
            }
            
            mat-form-field {
              .mat-mdc-form-field-flex {
                background: rgba(255, 255, 255, 0.8);
                border-radius: 8px;
              }
            }
          }
        }
        
        // 横向对比表格样式
        .horizontal-comparison {
          .comparison-table {
            width: 100%;
            background: transparent;
            
            .mat-mdc-header-row {
              background: linear-gradient(135deg, #f8f9fa, #e9ecef);
              
              .mat-mdc-header-cell {
                font-weight: 600;
                color: #495057;
                border-bottom: 2px solid #dee2e6;
              }
            }
            
            .mat-mdc-row {
              transition: all 0.3s ease;
              
              &:hover {
                background: rgba(102, 126, 234, 0.05);
                transform: translateY(-1px);
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
              }
              
              .mat-mdc-cell {
                border-bottom: 1px solid #e9ecef;
                padding: 16px;
                
                .comparison-item-name {
                  display: flex;
                  align-items: center;
                  gap: 12px;
                  
                  mat-icon {
                    width: 24px;
                    height: 24px;
                    font-size: 24px;
                    
                    &.tech-icon { color: #007bff; }
                    &.design-icon { color: #e83e8c; }
                    &.product-icon { color: #ffc107; }
                    &.operation-icon { color: #28a745; }
                    &.period-icon { color: #6f42c1; }
                    &.person-icon { color: #fd7e14; }
                    &.project-icon { color: #20c997; }
                    &.new-icon { color: #6c757d; }
                  }
                  
                  span {
                    font-weight: 500;
                    color: #495057;
                  }
                }
                
                .metric-cell {
                  display: flex;
                  flex-direction: column;
                  gap: 8px;
                  
                  .metric-value {
                    font-weight: 600;
                    font-size: 16px;
                    
                    &.metric-excellent { color: #28a745; }
                    &.metric-good { color: #17a2b8; }
                    &.metric-average { color: #ffc107; }
                    &.metric-poor { color: #dc3545; }
                  }
                  
                  .metric-bar {
                    width: 100%;
                    height: 6px;
                    background: #e9ecef;
                    border-radius: 3px;
                    overflow: hidden;
                    
                    .bar-fill {
                      height: 100%;
                      background: linear-gradient(90deg, #28a745, #20c997);
                      border-radius: 3px;
                      transition: width 0.3s ease;
                    }
                  }
                }
              }
            }
          }
        }
        
        // 纵向对比卡片样式
        .vertical-comparison {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
          gap: 20px;
          
          .comparison-item-card {
            background: rgba(255, 255, 255, 0.9);
            border: 1px solid rgba(0, 0, 0, 0.1);
            border-radius: 12px;
            transition: all 0.3s ease;
            
            &:hover {
              transform: translateY(-4px);
              box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
            }
            
            mat-card-header {
              background: linear-gradient(135deg, #f8f9fa, #e9ecef);
              padding: 16px;
              border-radius: 12px 12px 0 0;
              
              .comparison-item-header {
                display: flex;
                align-items: center;
                gap: 12px;
                flex: 1;
                
                mat-icon {
                  width: 32px;
                  height: 32px;
                  font-size: 32px;
                  
                  &.tech-icon { color: #007bff; }
                  &.design-icon { color: #e83e8c; }
                  &.product-icon { color: #ffc107; }
                  &.operation-icon { color: #28a745; }
                  &.period-icon { color: #6f42c1; }
                  &.person-icon { color: #fd7e14; }
                  &.project-icon { color: #20c997; }
                  &.new-icon { color: #6c757d; }
                }
                
                .item-info {
                  h3 {
                    margin: 0;
                    font-size: 18px;
                    font-weight: 600;
                    color: #495057;
                  }
                  
                  .item-category {
                    font-size: 12px;
                    color: #6c757d;
                    background: rgba(108, 117, 125, 0.1);
                    padding: 2px 8px;
                    border-radius: 12px;
                    margin-top: 4px;
                    display: inline-block;
                  }
                }
              }
              
              .item-actions {
                display: flex;
                gap: 8px;
                
                button {
                  width: 36px;
                  height: 36px;
                  
                  mat-icon {
                    font-size: 18px;
                    width: 18px;
                    height: 18px;
                  }
                }
              }
            }
            
            mat-card-content {
              padding: 20px;
              
              .metrics-grid {
                display: grid;
                grid-template-columns: 1fr;
                gap: 16px;
                margin-bottom: 20px;
                
                .metric-item {
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  padding: 12px;
                  background: rgba(248, 249, 250, 0.8);
                  border-radius: 8px;
                  
                  .metric-label {
                    font-weight: 500;
                    color: #495057;
                    font-size: 14px;
                  }
                  
                  .metric-value-container {
                    display: flex;
                    flex-direction: column;
                    align-items: flex-end;
                    gap: 4px;
                    min-width: 80px;
                    
                    .metric-value {
                      font-weight: 600;
                      font-size: 16px;
                      
                      &.metric-excellent { color: #28a745; }
                      &.metric-good { color: #17a2b8; }
                      &.metric-average { color: #ffc107; }
                      &.metric-poor { color: #dc3545; }
                    }
                    
                    mat-progress-bar {
                      width: 60px;
                      height: 4px;
                      
                      &.progress-excellent ::ng-deep .mdc-linear-progress__bar-inner {
                        border-color: #28a745;
                      }
                      &.progress-good ::ng-deep .mdc-linear-progress__bar-inner {
                        border-color: #17a2b8;
                      }
                      &.progress-average ::ng-deep .mdc-linear-progress__bar-inner {
                        border-color: #ffc107;
                      }
                      &.progress-poor ::ng-deep .mdc-linear-progress__bar-inner {
                        border-color: #dc3545;
                      }
                    }
                  }
                }
              }
              
              .comparison-summary {
                display: flex;
                justify-content: space-between;
                padding: 16px;
                background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
                border-radius: 8px;
                border: 1px solid rgba(102, 126, 234, 0.2);
                
                .summary-item {
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  gap: 4px;
                  
                  .summary-label {
                    font-size: 12px;
                    color: #6c757d;
                    font-weight: 500;
                  }
                  
                  .summary-value {
                    font-size: 18px;
                    font-weight: 700;
                    
                    &.score-excellent { color: #28a745; }
                    &.score-good { color: #17a2b8; }
                    &.score-average { color: #ffc107; }
                    &.score-poor { color: #dc3545; }
                    
                    &.rank {
                      color: #667eea;
                    }
                  }
                }
              }
            }
          }
        }
        
        // 对比图表样式
        .comparison-chart-section {
          margin-top: 24px;
          padding-top: 20px;
          border-top: 1px solid #e9ecef;
          
          .chart-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            
            h3 {
              margin: 0;
              font-size: 18px;
              font-weight: 600;
              color: #495057;
            }
            
            mat-button-toggle-group {
              mat-button-toggle {
                mat-icon {
                  margin-right: 4px;
                }
              }
            }
          }
          
          .chart-container {
            background: rgba(255, 255, 255, 0.8);
            border-radius: 12px;
            padding: 20px;
            border: 1px solid rgba(0, 0, 0, 0.1);
            
            canvas {
              max-width: 100%;
              height: auto;
            }
          }
        }
      }
    }
  }

  // 离职原因分析样式
  .resignation-analysis-section {
    margin-top: 24px;
    
    .analysis-card {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      border-radius: 16px;
      box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
      overflow: hidden;
      
      mat-card-header {
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        padding: 20px 24px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        
        mat-card-title {
          display: flex;
          align-items: center;
          gap: 12px;
          font-size: 20px;
          font-weight: 600;
          margin: 0;
          
          mat-icon {
            font-size: 24px;
            width: 24px;
            height: 24px;
          }
        }
        
        .analysis-actions {
          display: flex;
          align-items: center;
          gap: 16px;
          
          .time-range-selector {
            min-width: 140px;
            
            .mat-mdc-form-field-subscript-wrapper {
              display: none;
            }
            
            .mat-mdc-text-field-wrapper {
              background: rgba(255, 255, 255, 0.1);
              border-radius: 8px;
            }
            
            .mat-mdc-form-field-infix {
              color: white;
            }
            
            .mat-mdc-select-arrow {
              color: white;
            }
          }
          
          .export-analysis-btn {
            background: rgba(255, 255, 255, 0.2);
            color: white;
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 8px;
            padding: 8px 16px;
            transition: all 0.3s ease;
            
            &:hover {
              background: rgba(255, 255, 255, 0.3);
              transform: translateY(-2px);
            }
            
            mat-icon {
              margin-right: 8px;
            }
          }
        }
      }
      
      mat-card-content {
        padding: 24px;
        background: white;
        color: #333;
        
        .category-filters {
          margin-bottom: 24px;
          
          .filter-group {
            margin-bottom: 16px;
            
            label {
              display: block;
              font-weight: 600;
              margin-bottom: 8px;
              color: #555;
            }
            
            mat-chip-set {
              display: flex;
              flex-wrap: wrap;
              gap: 8px;
              
              mat-chip {
                background: #f5f5f5;
                color: #666;
                border: 1px solid #e0e0e0;
                border-radius: 20px;
                padding: 8px 16px;
                cursor: pointer;
                transition: all 0.3s ease;
                
                &.selected {
                  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                  color: white;
                  border-color: #667eea;
                  transform: translateY(-2px);
                  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
                }
                
                &:hover {
                  transform: translateY(-1px);
                  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
                }
                
                .count {
                  margin-left: 4px;
                  font-size: 0.9em;
                  opacity: 0.8;
                }
              }
            }
          }
        }
        
        .resignation-overview {
          margin-bottom: 32px;
          
          .overview-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 16px;
            
            .overview-card {
              background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
              color: white;
              padding: 20px;
              border-radius: 12px;
              display: flex;
              align-items: center;
              gap: 16px;
              box-shadow: 0 4px 16px rgba(240, 147, 251, 0.3);
              transition: all 0.3s ease;
              
              &:hover {
                transform: translateY(-4px);
                box-shadow: 0 8px 24px rgba(240, 147, 251, 0.4);
              }
              
              &.total {
                background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
              }
              
              &.rate {
                background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
              }
              
              &.avg-tenure {
                background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
              }
              
              &.cost {
                background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
                color: #333;
              }
              
              .card-icon {
                background: rgba(255, 255, 255, 0.2);
                border-radius: 50%;
                padding: 12px;
                display: flex;
                align-items: center;
                justify-content: center;
                
                mat-icon {
                  font-size: 24px;
                  width: 24px;
                  height: 24px;
                }
              }
              
              .card-content {
                flex: 1;
                
                .card-value {
                  font-size: 24px;
                  font-weight: 700;
                  margin-bottom: 4px;
                }
                
                .card-label {
                  font-size: 14px;
                  opacity: 0.9;
                }
              }
            }
          }
        }
        
        .resignation-reasons-analysis {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 16px;
          margin-bottom: 32px;
          padding: 0 8px;
          
          @media (max-width: 1200px) {
            grid-template-columns: 1fr;
          }
          
          .reasons-chart-section {
            .chart-header {
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-bottom: 20px;
              
              h3 {
                margin: 0;
                color: #333;
                font-weight: 600;
              }
              
              mat-button-toggle-group {
                .mat-button-toggle {
                  border: 1px solid #e0e0e0;
                  
                  &.mat-button-toggle-checked {
                    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                    color: white;
                  }
                }
              }
            }
            
            .chart-container {
              background: #f8f9fa;
              border-radius: 12px;
              padding: 20px;
              display: flex;
              justify-content: center;
              align-items: center;
              min-height: 400px;
            }
          }
          
          .reasons-list-section {
            h3 {
              margin: 0 0 20px 0;
              color: #333;
              font-weight: 600;
            }
            
            .reasons-list-container {
              max-height: 480px; // 限制高度，大约显示两个项目
              overflow-y: auto;
              padding-right: 8px;
              
              // 自定义滚动条样式
              &::-webkit-scrollbar {
                width: 6px;
              }
              
              &::-webkit-scrollbar-track {
                background: #f1f1f1;
                border-radius: 3px;
              }
              
              &::-webkit-scrollbar-thumb {
                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                border-radius: 3px;
                
                &:hover {
                  background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
                }
              }
            }
            
            .reasons-list {
              .reason-item {
                background: #f8f9fa;
                border-radius: 12px;
                padding: 20px;
                margin-bottom: 16px;
                border-left: 4px solid #667eea;
                transition: all 0.3s ease;
                
                &:hover {
                  transform: translateX(4px);
                  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
                }
                
                &.reason-compensation {
                  border-left-color: #f093fb;
                }
                
                &.reason-development {
                  border-left-color: #4facfe;
                }
                
                &.reason-worklife {
                  border-left-color: #43e97b;
                }
                
                &.reason-management {
                  border-left-color: #fa709a;
                }
                
                &.reason-culture {
                  border-left-color: #a8edea;
                }
                
                &.reason-personal {
                  border-left-color: #fee140;
                }
                
                .reason-header {
                  display: flex;
                  justify-content: space-between;
                  align-items: flex-start;
                  margin-bottom: 12px;
                  
                  .reason-info {
                    display: flex;
                    align-items: center;
                    gap: 12px;
                    
                    mat-icon {
                      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                      color: white;
                      border-radius: 50%;
                      padding: 8px;
                      font-size: 20px;
                      width: 36px;
                      height: 36px;
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      
                      &.icon-compensation {
                        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
                      }
                      
                      &.icon-development {
                        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
                      }
                      
                      &.icon-worklife {
                        background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
                      }
                      
                      &.icon-management {
                        background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
                      }
                      
                      &.icon-culture {
                        background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
                      }
                      
                      &.icon-personal {
                        background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
                      }
                    }
                    
                    .reason-details {
                      h4 {
                        margin: 0 0 4px 0;
                        font-size: 16px;
                        font-weight: 600;
                        color: #333;
                      }
                      
                      .reason-category {
                        font-size: 12px;
                        color: #666;
                        background: #e9ecef;
                        padding: 2px 8px;
                        border-radius: 12px;
                      }
                    }
                  }
                  
                  .reason-stats {
                    text-align: right;
                    
                    .percentage {
                      font-size: 20px;
                      font-weight: 700;
                      color: #667eea;
                      margin-bottom: 2px;
                    }
                    
                    .count {
                      font-size: 12px;
                      color: #666;
                    }
                  }
                }
                
                .reason-progress {
                  margin-bottom: 12px;
                  
                  mat-progress-bar {
                    height: 6px;
                    border-radius: 3px;
                  }
                }
                
                .reason-description {
                  margin-bottom: 16px;
                  
                  p {
                    margin: 0 0 8px 0;
                    color: #555;
                    font-size: 14px;
                    line-height: 1.5;
                  }
                  
                  .trend-indicator {
                    display: flex;
                    align-items: center;
                    gap: 4px;
                    font-size: 12px;
                    
                    &.trend-up {
                      color: #dc3545;
                      
                      mat-icon {
                        color: #dc3545;
                      }
                    }
                    
                    &.trend-down {
                      color: #28a745;
                      
                      mat-icon {
                        color: #28a745;
                      }
                    }
                    
                    mat-icon {
                      font-size: 16px;
                      width: 16px;
                      height: 16px;
                    }
                  }
                }
                
                .reason-actions {
                  display: flex;
                  gap: 8px;
                  
                  button {
                    flex: 1;
                    border: 1px solid #e0e0e0;
                    border-radius: 6px;
                    padding: 8px 12px;
                    font-size: 12px;
                    transition: all 0.3s ease;
                    
                    &:hover {
                      background: #667eea;
                      color: white;
                      border-color: #667eea;
                      transform: translateY(-1px);
                    }
                    
                    mat-icon {
                      font-size: 14px;
                      width: 14px;
                      height: 14px;
                      margin-right: 4px;
                    }
                  }
                }
              }
            }
          }
        }
        

      }
    }
  }

  // 新人跟进管理页面样式
  .onboarding-page {
    .content-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 30px;

      @media (max-width: 1200px) {
        grid-template-columns: 1fr;
      }
    }

    .newbie-card, .checkpoint-card {
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(10px);
      border-radius: 20px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);

      mat-card-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-radius: 20px 20px 0 0;
        padding: 20px;

        mat-card-title {
          display: flex;
          align-items: center;
          font-size: 18px;
          font-weight: 600;
          margin: 0;

          mat-icon {
            margin-right: 10px;
          }
        }
      }

      mat-card-content {
        padding: 25px;
      }
    }

    .newbie-item {
      display: flex;
      align-items: center;
      gap: 15px;
      padding: 15px;
      margin-bottom: 15px;
      background: rgba(33, 150, 243, 0.05);
      border-radius: 15px;
      transition: all 0.3s ease;

      &:hover {
        background: rgba(33, 150, 243, 0.1);
        transform: translateX(5px);
      }

      .newbie-avatar {
        width: 50px;
        height: 50px;
        background: linear-gradient(45deg, #2196F3, #21CBF3);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;

        mat-icon {
          font-size: 24px;
        }
      }

      .newbie-info {
        flex: 1;

        .newbie-name {
          margin: 0 0 5px 0;
          font-size: 16px;
          font-weight: 600;
          color: #333;
        }

        .newbie-position {
          margin: 0 0 5px 0;
          font-size: 14px;
          color: #666;
        }

        .newbie-date {
          margin: 0;
          font-size: 12px;
          color: #999;
        }
      }

      .newbie-progress {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 120px;

        mat-progress-bar {
          flex: 1;
          height: 6px;
          border-radius: 3px;
        }

        .progress-text {
          font-size: 14px;
          font-weight: 600;
          color: #333;
        }
      }
    }

    .checkpoint-item {
      display: flex;
      gap: 15px;
      padding: 15px;
      margin-bottom: 15px;
      background: rgba(76, 175, 80, 0.05);
      border-radius: 15px;
      border-left: 4px solid #4caf50;

      .checkpoint-content {
        flex: 1;

        .checkpoint-title {
          margin: 0 0 8px 0;
          font-size: 16px;
          font-weight: 600;
          color: #333;
        }

        .checkpoint-description {
          margin: 0 0 10px 0;
          font-size: 14px;
          color: #666;
          line-height: 1.4;
        }

        .checkpoint-timeline {
          display: flex;
          align-items: center;
          gap: 5px;
          font-size: 12px;
          color: #999;

          mat-icon {
            font-size: 16px;
          }
        }
      }
    }
  }

  // 响应式设计
  @media (max-width: 768px) {
    .hr-dashboard-container {
      padding: 15px;
    }

    .top-navigation {
      margin-bottom: 20px;

      .nav-buttons {
        .nav-button {
          padding: 10px 16px;
          font-size: 14px;
        }
      }
    }

    .visualization-page {
      .top-charts-row {
        flex-direction: column;
        gap: 15px;

        .chart-card {
          mat-card-header {
            padding: 15px;

            mat-card-title {
              font-size: 16px;
            }
          }

          mat-card-content {
            padding: 15px;
          }
        }
      }

      .resignation-analysis-section {
        margin-top: 15px;
      }
    }
  }

  // 招聘阶段样式
  .recruitment-stages {
    .stage-actions {
      display: flex;
      align-items: center;
      gap: 10px;

      button {
        color: rgba(255, 255, 255, 0.8);
        
        &:hover {
          color: white;
          background: rgba(255, 255, 255, 0.1);
        }
      }
    }

    .stages-timeline-container {
      position: relative;
      margin: 20px 0;
    }

    .stages-timeline {
      display: flex;
      flex-direction: column;
      gap: 20px;
      max-height: 480px; // 限制显示约2个项目的高度
      overflow-y: auto;
      padding-right: 10px;
      
      // 自定义滚动条样式
      &::-webkit-scrollbar {
        width: 6px;
      }
      
      &::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.1);
        border-radius: 3px;
      }
      
      &::-webkit-scrollbar-thumb {
        background: linear-gradient(135deg, #2196f3, #03a9f4);
        border-radius: 3px;
        
        &:hover {
          background: linear-gradient(135deg, #1976d2, #0288d1);
        }
      }
      
      // 滚动动画
      scroll-behavior: smooth;

      .timeline-item {
        display: flex;
        align-items: flex-start;
        gap: 20px;
        padding: 20px;
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.8);
        border: 2px solid transparent;
        transition: all 0.3s ease;
        cursor: pointer;
        position: relative;

        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
          border-color: rgba(33, 150, 243, 0.3);
        }

        &.status-completed {
          background: linear-gradient(135deg, rgba(76, 175, 80, 0.1), rgba(139, 195, 74, 0.1));
          border-color: rgba(76, 175, 80, 0.3);

          .timeline-marker {
            background: linear-gradient(135deg, #4caf50, #8bc34a);
            color: white;
          }

          .status-completed {
            background: linear-gradient(135deg, #4caf50, #8bc34a);
            color: white;
          }
        }

        &.status-active {
          background: linear-gradient(135deg, rgba(33, 150, 243, 0.1), rgba(3, 169, 244, 0.1));
          border-color: rgba(33, 150, 243, 0.3);
          animation: pulse 2s infinite;

          .timeline-marker {
            background: linear-gradient(135deg, #2196f3, #03a9f4);
            color: white;
          }

          .status-active {
            background: linear-gradient(135deg, #2196f3, #03a9f4);
            color: white;
          }
        }

        &.status-pending {
          background: rgba(158, 158, 158, 0.1);
          border-color: rgba(158, 158, 158, 0.3);

          .timeline-marker {
            background: #9e9e9e;
            color: white;
          }

          .status-pending {
            background: #9e9e9e;
            color: white;
          }
        }

        &.status-blocked {
          background: linear-gradient(135deg, rgba(244, 67, 54, 0.1), rgba(255, 87, 34, 0.1));
          border-color: rgba(244, 67, 54, 0.3);

          .timeline-marker {
            background: linear-gradient(135deg, #f44336, #ff5722);
            color: white;
          }

          .status-blocked {
            background: linear-gradient(135deg, #f44336, #ff5722);
            color: white;
          }
        }

        .timeline-marker {
          width: 50px;
          height: 50px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          background: #e0e0e0;
          flex-shrink: 0;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

          mat-icon {
            font-size: 24px;
            width: 24px;
            height: 24px;
          }
        }

        .timeline-content {
          flex: 1;

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

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

            mat-chip {
              font-size: 12px;
              font-weight: 500;
              border-radius: 20px;
              padding: 4px 12px;
            }
          }

          .stage-stats {
            display: flex;
            gap: 20px;
            margin-bottom: 15px;

            .stat-item {
              display: flex;
              align-items: center;
              gap: 6px;
              font-size: 14px;
              color: #666;

              mat-icon {
                font-size: 18px;
                width: 18px;
                height: 18px;
                color: #2196f3;
              }
            }
          }

          .stage-details {
            .detail-row {
              display: flex;
              align-items: center;
              margin-bottom: 8px;
              font-size: 14px;

              .label {
                font-weight: 500;
                color: #666;
                min-width: 80px;
              }

              .value {
                color: #333;
              }

              &.next-action {
                color: #2196f3;
                font-weight: 500;
                margin-top: 10px;

                mat-icon {
                  margin-right: 8px;
                  font-size: 16px;
                  width: 16px;
                  height: 16px;
                }
              }
            }
          }
        }

        .timeline-connector {
          position: absolute;
          left: 45px;
          bottom: -20px;
          width: 2px;
          height: 20px;
          background: linear-gradient(to bottom, #e0e0e0, transparent);
        }
      }
    }

    // 滑动指示器样式
    .scroll-indicator {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 20px;
      padding: 15px 20px;
      background: rgba(255, 255, 255, 0.8);
      border-radius: 12px;
      border: 1px solid rgba(0, 0, 0, 0.1);

      .scroll-dots {
        display: flex;
        gap: 8px;

        .scroll-dot {
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background: rgba(0, 0, 0, 0.3);
          cursor: pointer;
          transition: all 0.3s ease;

          &.active {
            background: linear-gradient(135deg, #2196f3, #03a9f4);
            transform: scale(1.2);
          }

          &:hover {
            background: rgba(33, 150, 243, 0.6);
            transform: scale(1.1);
          }
        }
      }

      .scroll-hint {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #666;
        font-size: 14px;

        mat-icon {
          font-size: 18px;
          width: 18px;
          height: 18px;
          color: #2196f3;
        }

        span {
          font-weight: 500;
        }
      }
    }

    .probation-link-section {
      margin-top: 30px;

      .probation-link-card {
        background: linear-gradient(135deg, rgba(103, 58, 183, 0.1), rgba(156, 39, 176, 0.1));
        border: 2px solid rgba(103, 58, 183, 0.2);
        border-radius: 16px;

        .link-header {
          display: flex;
          align-items: center;
          gap: 12px;
          margin-bottom: 10px;

          mat-icon {
            color: #673ab7;
            font-size: 24px;
          }

          h4 {
            margin: 0;
            color: #673ab7;
            font-weight: 600;
          }
        }

        p {
          color: #666;
          margin-bottom: 20px;
        }

        .link-actions {
          display: flex;
          gap: 15px;
          flex-wrap: wrap;

          button {
            border-radius: 25px;
            padding: 10px 20px;
            font-weight: 500;
            transition: all 0.3s ease;

            &:hover {
              transform: translateY(-2px);
              box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
            }

            mat-icon {
              margin-right: 8px;
            }
          }
        }
      }
    }
  }

  // 招聘流程优化页面样式
  .recruitment-page {
    .content-layout {
      display: grid;
      gap: 20px;
      grid-template-columns: 1fr 1fr;
      
      @media (max-width: 768px) {
        grid-template-columns: 1fr;
      }
    }

    .ai-analysis-section {
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(10px);
      border-radius: 20px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
      
      mat-card-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-radius: 20px 20px 0 0;
        
        mat-card-title {
          display: flex;
          align-items: center;
          
          mat-icon {
            margin-right: 10px;
          }
        }
      }

      mat-card-content {
        padding: 24px 24px 20px 24px !important;
      }

      .upload-area {
        margin-bottom: 20px;
        
        .upload-zone {
          background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.9) 100%);
          border: 2px dashed rgba(59, 130, 246, 0.3);
          border-radius: 20px;
          padding: 32px 24px;
          text-align: center;
          cursor: pointer;
          transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
          backdrop-filter: blur(10px);
          position: relative;
          overflow: hidden;
          
          &::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(147, 51, 234, 0.05) 100%);
            opacity: 0;
            transition: opacity 0.3s ease;
          }
          
          &:hover {
            border-color: rgba(59, 130, 246, 0.6);
            transform: translateY(-2px);
            box-shadow: 0 20px 40px rgba(59, 130, 246, 0.15);
            
            &::before {
              opacity: 1;
            }
            
            .upload-icon {
              transform: scale(1.1);
              color: #3b82f6;
            }
            
            .upload-title {
              color: #1e40af;
            }
          }
          
          &.drag-over {
            border-color: #3b82f6;
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(147, 51, 234, 0.1) 100%);
            transform: scale(1.02);
            
            .upload-icon {
              animation: bounce 0.6s ease-in-out;
              color: #3b82f6;
            }
          }
          
          .upload-icon {
            font-size: 56px;
            background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 16px;
            transition: all 0.3s ease;
          }
          
          .upload-title {
            font-size: 18px;
            font-weight: 600;
            color: #1f2937;
            margin: 8px 0;
            transition: color 0.3s ease;
          }
          
          .upload-hint {
            font-size: 14px;
            color: #6b7280;
            margin: 8px 0 24px 0;
            line-height: 1.5;
          }
          
          .upload-actions {
            .mat-stroked-button {
              background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
              color: white;
              border: none;
              border-radius: 12px;
              padding: 12px 24px;
              font-weight: 600;
              transition: all 0.3s ease;
              box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
              
              &:hover {
                transform: translateY(-2px);
                box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
              }
              
              mat-icon {
                margin-right: 8px;
              }
            }
          }
        }
      }

      @keyframes bounce {
        0%, 20%, 50%, 80%, 100% {
          transform: translateY(0);
        }
        40% {
          transform: translateY(-10px);
        }
        60% {
          transform: translateY(-5px);
        }
      }

      .analysis-progress {
        background: rgba(255, 255, 255, 0.95);
        border-radius: 15px;
        padding: 16px;
        margin: 16px 0;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        border: 1px solid rgba(33, 150, 243, 0.2);
        
        .progress-header {
          display: flex;
          align-items: center;
          margin-bottom: 15px;
          
          .analyzing-icon {
            color: #2196F3;
            margin-right: 10px;
            animation: pulse 2s infinite;
          }
          
          .progress-text {
            font-weight: 500;
            color: #333;
          }
        }
        
        mat-progress-bar {
          margin-bottom: 10px;
          height: 8px;
          border-radius: 4px;
          
          ::ng-deep .mat-progress-bar-fill::after {
            background: linear-gradient(45deg, #2196F3, #21CBF3);
          }
        }
        
        .progress-details {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 14px;
          
          .file-name {
            color: #666;
            max-width: 200px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          
          .progress-percentage {
            color: #2196F3;
            font-weight: 600;
          }
        }
      }

      @keyframes pulse {
        0% { transform: scale(1); }
        50% { transform: scale(1.1); }
        100% { transform: scale(1); }
      }

      .analysis-results {
        animation: slideInUp 0.6s ease-out;
        
        h4 {
          display: flex;
          align-items: center;
          font-size: 18px;
          font-weight: 600;
          color: #1f2937;
          margin: 24px 0 16px 0;
          
          mat-icon {
            margin-right: 12px;
            color: #3b82f6;
            font-size: 24px;
          }
        }
        
        .match-dimensions {
          margin-bottom: 24px;
          
          .dimension-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            
            mat-chip-set {
              mat-chip {
                background: rgba(255, 255, 255, 0.9);
                border: 1px solid rgba(59, 130, 246, 0.2);
                border-radius: 16px;
                padding: 12px 16px;
                font-weight: 500;
                transition: all 0.3s ease;
                backdrop-filter: blur(10px);
                
                &:hover {
                  transform: translateY(-2px);
                  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.15);
                }
                
                &.match-level-high {
                  background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(16, 185, 129, 0.1) 100%);
                  border-color: rgba(34, 197, 94, 0.3);
                  color: #059669;
                  
                  mat-icon {
                    color: #10b981;
                  }
                  
                  .match-score {
                    background: rgba(34, 197, 94, 0.2);
                    color: #065f46;
                  }
                }
                
                &.match-level-medium {
                  background: linear-gradient(135deg, rgba(251, 191, 36, 0.1) 0%, rgba(245, 158, 11, 0.1) 100%);
                  border-color: rgba(251, 191, 36, 0.3);
                  color: #d97706;
                  
                  mat-icon {
                    color: #f59e0b;
                  }
                  
                  .match-score {
                    background: rgba(251, 191, 36, 0.2);
                    color: #92400e;
                  }
                }
                
                &.match-level-low {
                  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(220, 38, 38, 0.1) 100%);
                  border-color: rgba(239, 68, 68, 0.3);
                  color: #dc2626;
                  
                  mat-icon {
                    color: #ef4444;
                  }
                  
                  .match-score {
                    background: rgba(239, 68, 68, 0.2);
                    color: #991b1b;
                  }
                }
                
                mat-icon {
                  margin-right: 8px;
                  font-size: 18px;
                }
                
                .match-score {
                  margin-left: 8px;
                  padding: 4px 8px;
                  border-radius: 8px;
                  font-size: 12px;
                  font-weight: 600;
                }
              }
            }
          }
        }
        
        .recommendation-section {
          margin-bottom: 24px;
          
          .recommendation-card {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            padding: 20px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            
            &:hover {
              transform: translateY(-2px);
              box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
            }
            
            &.recommendation-recommend {
              border-left: 4px solid #10b981;
              background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, rgba(34, 197, 94, 0.05) 100%);
            }
            
            &.recommendation-consider {
              border-left: 4px solid #f59e0b;
              background: linear-gradient(135deg, rgba(245, 158, 11, 0.05) 0%, rgba(251, 191, 36, 0.05) 100%);
            }
            
            &.recommendation-reject {
              border-left: 4px solid #ef4444;
              background: linear-gradient(135deg, rgba(239, 68, 68, 0.05) 0%, rgba(220, 38, 38, 0.05) 100%);
            }
            
            .recommendation-header {
              display: flex;
              align-items: center;
              margin-bottom: 16px;
              
              mat-icon {
                font-size: 24px;
                margin-right: 12px;
                
                .recommendation-recommend & {
                  color: #10b981;
                }
                
                .recommendation-consider & {
                  color: #f59e0b;
                }
                
                .recommendation-reject & {
                  color: #ef4444;
                }
              }
              
              .recommendation-title {
                flex: 1;
                font-size: 18px;
                font-weight: 600;
                color: #1f2937;
              }
              
              mat-chip {
                border-radius: 12px;
                font-weight: 600;
                
                &.level-recommend {
                  background: rgba(16, 185, 129, 0.2);
                  color: #065f46;
                }
                
                &.level-consider {
                  background: rgba(245, 158, 11, 0.2);
                  color: #92400e;
                }
                
                &.level-reject {
                  background: rgba(239, 68, 68, 0.2);
                  color: #991b1b;
                }
              }
            }
            
            .recommendation-content {
              .recommendation-summary {
                font-size: 16px;
                line-height: 1.6;
                color: #4b5563;
                margin-bottom: 20px;
                padding: 16px;
                background: rgba(248, 250, 252, 0.8);
                border-radius: 12px;
                border-left: 3px solid #3b82f6;
              }
              
              .recommendation-reasons,
              .recommendation-concerns {
                margin-bottom: 16px;
                
                h5 {
                  font-size: 14px;
                  font-weight: 600;
                  color: #374151;
                  margin-bottom: 8px;
                  display: flex;
                  align-items: center;
                  
                  &::before {
                    content: '';
                    width: 4px;
                    height: 16px;
                    background: #3b82f6;
                    border-radius: 2px;
                    margin-right: 8px;
                  }
                }
                
                ul {
                  list-style: none;
                  padding: 0;
                  margin: 0;
                  
                  li {
                    padding: 8px 0;
                    padding-left: 24px;
                    position: relative;
                    color: #6b7280;
                    line-height: 1.5;
                    
                    &::before {
                      content: '•';
                      position: absolute;
                      left: 8px;
                      color: #3b82f6;
                      font-weight: bold;
                    }
                  }
                }
              }
              
              .recommendation-concerns {
                h5::before {
                  background: #f59e0b;
                }
                
                ul li::before {
                  color: #f59e0b;
                }
              }
            }
          }
        }
        
        .screening-info {
          .screening-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
            
            .screening-item {
              display: flex;
              align-items: center;
              padding: 16px 20px;
              background: rgba(255, 255, 255, 0.9);
              border-radius: 16px;
              backdrop-filter: blur(10px);
              border: 1px solid rgba(255, 255, 255, 0.2);
              transition: all 0.3s ease;
              
              &:hover {
                transform: translateX(4px);
                box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
              }
              
              .screening-icon {
                width: 40px;
                height: 40px;
                border-radius: 12px;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-right: 16px;
                
                mat-icon {
                  font-size: 20px;
                }
              }
              
              .screening-content {
                flex: 1;
                
                .screening-title {
                  font-weight: 600;
                  color: #1f2937;
                  margin-bottom: 4px;
                }
                
                .screening-detail {
                  font-size: 14px;
                  color: #6b7280;
                }
              }
              
              .screening-status {
                mat-chip {
                  border-radius: 12px;
                  font-weight: 600;
                  font-size: 12px;
                }
              }
              
              &.status-pass {
                border-left: 4px solid #10b981;
                
                .screening-icon {
                  background: rgba(16, 185, 129, 0.1);
                  
                  mat-icon {
                    color: #10b981;
                  }
                }
                
                .screening-status mat-chip {
                  background: rgba(16, 185, 129, 0.2);
                  color: #065f46;
                }
              }
              
              &.status-warning {
                border-left: 4px solid #f59e0b;
                
                .screening-icon {
                  background: rgba(245, 158, 11, 0.1);
                  
                  mat-icon {
                    color: #f59e0b;
                  }
                }
                
                .screening-status mat-chip {
                  background: rgba(245, 158, 11, 0.2);
                  color: #92400e;
                }
              }
              
              &.status-fail {
                border-left: 4px solid #ef4444;
                
                .screening-icon {
                  background: rgba(239, 68, 68, 0.1);
                  
                  mat-icon {
                    color: #ef4444;
                  }
                }
                
                .screening-status mat-chip {
                  background: rgba(239, 68, 68, 0.2);
                  color: #991b1b;
                }
              }
            }
          }
        }
      }

      @keyframes slideInUp {
        from {
          opacity: 0;
          transform: translateY(30px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
    }

    .recruitment-stages {
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(10px);
      border-radius: 20px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
      
      mat-card-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-radius: 20px 20px 0 0;
        
        mat-card-title {
          display: flex;
          align-items: center;
          
          mat-icon {
            margin-right: 10px;
          }
        }
      }

      .stages-timeline {
        .timeline-item {
          display: flex;
          align-items: center;
          margin-bottom: 20px;
          position: relative;
          
          &:not(:last-child)::after {
            content: '';
            position: absolute;
            left: 12px;
            top: 30px;
            width: 2px;
            height: 40px;
            background: #ddd;
          }
          
          &.completed {
            .timeline-marker {
              background: #4caf50;
            }
            
            &::after {
              background: #4caf50;
            }
          }
          
          &.active {
            .timeline-marker {
              background: #2196F3;
              animation: pulse 2s infinite;
            }
          }
          
          .timeline-marker {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: #ddd;
            margin-right: 15px;
            flex-shrink: 0;
          }
          
          .timeline-content {
            h5 {
              margin: 0 0 5px 0;
              font-weight: 600;
              color: #333;
            }
            
            p {
              margin: 0;
              font-size: 14px;
              color: #666;
            }
          }
        }
      }
    }
  }

  // iOS风格筛选控件样式
  .filter-section.ios-style {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    margin-bottom: 30px;

    mat-card-header {
      background: linear-gradient(135deg, #007AFF, #5856D6);
      color: white;
      border-radius: 20px 20px 0 0;
      padding: 20px;

      .filter-actions {
        display: flex;
        align-items: center;
        gap: 10px;

        button {
          color: rgba(255, 255, 255, 0.8);
          
          &:hover {
            color: white;
            background: rgba(255, 255, 255, 0.1);
          }
        }
      }
    }

    .ios-filters {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 20px;
      margin-bottom: 25px;

      @media (max-width: 768px) {
        grid-template-columns: 1fr;
        gap: 15px;
      }

      .filter-group {
        display: flex;
        flex-direction: column;
        gap: 8px;

        .filter-label {
          font-size: 14px;
          font-weight: 600;
          color: #333;
          margin-bottom: 5px;
          line-height: 1.2;
        }

        .ios-select {
          .mat-mdc-form-field-outline {
            border-radius: 12px;
            border-color: rgba(0, 122, 255, 0.3);
          }

          .mat-mdc-form-field-outline-thick {
            border-color: #007AFF;
            border-width: 2px;
          }

          .mat-mdc-select-trigger {
            padding: 12px 16px;
            font-size: 16px;
            color: #333;
            min-height: 24px;
            display: flex;
            align-items: center;
          }

          .mat-mdc-select-arrow {
            color: #007AFF;
            display: flex;
            align-items: center;
            justify-content: center;
          }

          .mat-mdc-select-value {
            display: flex;
            align-items: center;
            min-height: 24px;
          }
        }

        .option-content {
          display: flex;
          align-items: center;
          gap: 12px;
          padding: 8px 0;
          min-height: 24px;

          mat-icon {
            font-size: 20px;
            width: 20px;
            height: 20px;
            color: #007AFF;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
          }

          span {
            font-size: 16px;
            color: #333;
            line-height: 1.2;
            flex: 1;
          }
        }
      }

      .filter-actions-group {
        grid-column: 1 / -1;
        display: flex;
        gap: 15px;
        justify-content: flex-start;
        flex-wrap: wrap;
        margin-top: 20px;
        padding: 15px 0;

        .ios-button {
          border-radius: 25px;
          padding: 12px 24px;
          font-weight: 600;
          font-size: 16px;
          transition: all 0.3s ease;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
          min-width: 140px;
          min-height: 48px;
          position: relative;
          overflow: hidden;

          &:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
          }

          &:active {
            transform: translateY(0);
            transition: transform 0.1s ease;
          }

          &.primary {
            background: linear-gradient(135deg, #007AFF, #5856D6);
            color: white;
            border: none;
            box-shadow: 0 4px 15px rgba(0, 122, 255, 0.3);

            &::before {
              content: '';
              position: absolute;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
              opacity: 0;
              transition: opacity 0.3s ease;
              border-radius: inherit;
            }

            &:hover {
              background: linear-gradient(135deg, #0056CC, #4A47B8);
              box-shadow: 0 6px 20px rgba(0, 122, 255, 0.4);
              
              &::before {
                opacity: 1;
              }
            }

            &:active {
              &::before {
                opacity: 0.5;
                background: radial-gradient(circle, rgba(255, 255, 255, 0.5) 0%, transparent 50%);
              }
            }

            &:disabled {
              background: #E5E5EA;
              color: #8E8E93;
              transform: none;
              box-shadow: none;
              cursor: not-allowed;
              
              &::before {
                display: none;
              }
            }
          }

          &.secondary {
            background: rgba(0, 122, 255, 0.05);
            color: #007AFF;
            border: 2px solid rgba(0, 122, 255, 0.3);
            box-shadow: 0 2px 8px rgba(0, 122, 255, 0.1);

            &::before {
              content: '';
              position: absolute;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              background: linear-gradient(135deg, rgba(0, 122, 255, 0.1), rgba(88, 86, 214, 0.1));
              opacity: 0;
              transition: opacity 0.3s ease;
              border-radius: inherit;
            }

            &:hover {
              background: rgba(0, 122, 255, 0.1);
              border-color: rgba(0, 122, 255, 0.5);
              box-shadow: 0 4px 15px rgba(0, 122, 255, 0.2);
              
              &::before {
                opacity: 1;
              }
            }

            &:active {
              &::before {
                opacity: 0.7;
              }
            }

            &:disabled {
              background: rgba(142, 142, 147, 0.05);
              color: #8E8E93;
              border-color: rgba(142, 142, 147, 0.3);
              transform: none;
              box-shadow: none;
              cursor: not-allowed;
              
              &::before {
                display: none;
              }
            }
          }

          mat-icon {
            font-size: 18px;
            width: 18px;
            height: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            line-height: 1;
          }

          .loading-spinner {
            width: 18px;
            height: 18px;
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-top: 2px solid white;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            flex-shrink: 0;
          }

          span {
            line-height: 1;
            white-space: nowrap;
            display: flex;
            align-items: center;
          }
        }
      }
    }

    .quick-filters {
      border-top: 1px solid rgba(0, 0, 0, 0.1);
      padding-top: 20px;
      margin-top: 20px;

      .quick-filter-label {
        font-size: 14px;
        font-weight: 600;
        color: #666;
        margin-bottom: 10px;
        display: block;
      }

      .quick-filter-chips {
        mat-chip-set {
          display: flex;
          flex-wrap: wrap;
          gap: 10px;

          mat-chip {
            background: rgba(0, 122, 255, 0.1);
            color: #007AFF;
            border: 1px solid rgba(0, 122, 255, 0.3);
            border-radius: 20px;
            padding: 8px 16px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 6px;
            min-height: 32px;

            &:hover {
              background: rgba(0, 122, 255, 0.2);
              transform: translateY(-1px);
              box-shadow: 0 4px 12px rgba(0, 122, 255, 0.2);
            }

            &.selected {
              background: linear-gradient(135deg, #007AFF, #5856D6);
              color: white;
              border-color: transparent;
            }

            mat-icon {
              font-size: 16px;
              width: 16px;
              height: 16px;
              flex-shrink: 0;
              display: flex;
              align-items: center;
              justify-content: center;
            }
          }
        }
      }
    }
  }

  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  // 绩效统计与分析页面样式
  .performance-page {
    .content-layout {
      display: grid;
      gap: 20px;
    }

    .filter-section {
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(10px);
      border-radius: 20px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
      
      mat-card-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-radius: 20px 20px 0 0;
        
        mat-card-title {
          display: flex;
          align-items: center;
          
          mat-icon {
            margin-right: 10px;
          }
        }
      }

      .filter-controls {
        display: flex;
        gap: 20px;
        align-items: center;
        flex-wrap: wrap;
        
        mat-form-field {
          min-width: 150px;
        }
        
        button {
          border-radius: 25px;
          padding: 10px 20px;
        }
      }
    }

    // 绩效指标容器
    .performance-metrics-container {
      margin-top: 30px;

      .metrics-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 25px;
        padding: 0 5px;

        h2 {
          margin: 0;
          font-size: 24px;
          font-weight: 600;
          color: #333;
          background: linear-gradient(135deg, #2196F3, #9C27B0);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
        }

        .metrics-actions {
          display: flex;
          align-items: center;
          gap: 15px;

          .refresh-btn {
            background: rgba(33, 150, 243, 0.1);
            color: #2196F3;
            border: 1px solid rgba(33, 150, 243, 0.3);
            transition: all 0.3s ease;

            &:hover {
              background: rgba(33, 150, 243, 0.2);
              transform: rotate(180deg);
            }
          }

          .export-btn {
            background: linear-gradient(135deg, #4CAF50, #8BC34A);
            color: white;
            border: none;
            border-radius: 25px;
            padding: 8px 20px;
            font-weight: 500;
            transition: all 0.3s ease;

            &:hover {
              transform: translateY(-2px);
              box-shadow: 0 8px 20px rgba(76, 175, 80, 0.3);
            }

            mat-icon {
              margin-right: 8px;
            }
          }
        }
      }

      .performance-metrics-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: 25px;
        
        .metric-card {
          background: rgba(255, 255, 255, 0.95);
          backdrop-filter: blur(20px);
          border-radius: 24px;
          box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
          border: 1px solid rgba(255, 255, 255, 0.2);
          transition: all 0.4s ease;
          overflow: hidden;
          position: relative;
          
          &:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
          }

          &.excellent {
            border-left: 4px solid #4CAF50;
            
            &:hover {
              box-shadow: 0 20px 50px rgba(76, 175, 80, 0.2);
            }
          }

          &.good {
            border-left: 4px solid #FF9800;
            
            &:hover {
              box-shadow: 0 20px 50px rgba(255, 152, 0, 0.2);
            }
          }

          &.warning {
            border-left: 4px solid #FF5722;
            
            &:hover {
              box-shadow: 0 20px 50px rgba(255, 87, 34, 0.2);
            }
          }

          &.poor {
            border-left: 4px solid #F44336;
            
            &:hover {
              box-shadow: 0 20px 50px rgba(244, 67, 54, 0.2);
            }
          }
          
          mat-card-content {
            padding: 25px;
            position: relative;
            display: flex;
            flex-direction: column;
            min-height: 300px;
            
            .metric-icon-wrapper {
              position: absolute;
              top: 20px;
              right: 20px;
              width: 50px;
              height: 50px;
              border-radius: 50%;
              display: flex;
              align-items: center;
              justify-content: center;
              background: rgba(33, 150, 243, 0.1);
              
              mat-icon {
                font-size: 24px;
                width: 24px;
                height: 24px;
                display: flex;
                align-items: center;
                justify-content: center;
                
                &.success-icon {
                  color: #4CAF50;
                }
                
                &.warning-icon {
                  color: #FF9800;
                }
                
                &.error-icon {
                  color: #F44336;
                }
              }
            }

            .metric-content {
              flex: 1;
              display: flex;
              flex-direction: column;
              
              .metric-header {
                margin-bottom: 20px;
                
                h3 {
                  margin: 0 0 5px 0;
                  font-size: 18px;
                  font-weight: 600;
                  color: #333;
                }

                .metric-period {
                  font-size: 12px;
                  color: #999;
                  background: rgba(0, 0, 0, 0.05);
                  padding: 2px 8px;
                  border-radius: 10px;
                  display: inline-block;
                }
              }

              .metric-value-section {
                display: flex;
                align-items: baseline;
                margin-bottom: 15px;
                
                .metric-value {
                  font-size: 36px;
                  font-weight: 700;
                  color: #2196F3;
                  line-height: 1;
                }

                .metric-unit {
                  font-size: 16px;
                  color: #666;
                  margin-left: 4px;
                  font-weight: 500;
                }
              }
              
              .metric-trend {
                display: flex;
                align-items: center;
                margin-bottom: 20px;
                padding: 8px 12px;
                border-radius: 12px;
                font-size: 14px;
                font-weight: 500;
                min-height: 32px;

                &.positive {
                  background: rgba(76, 175, 80, 0.1);
                  color: #4CAF50;
                }

                &.negative {
                  background: rgba(244, 67, 54, 0.1);
                  color: #F44336;
                }

                &.neutral {
                  background: rgba(158, 158, 158, 0.1);
                  color: #9E9E9E;
                }

                mat-icon {
                  margin-right: 6px;
                  font-size: 16px;
                  width: 16px;
                  height: 16px;
                  flex-shrink: 0;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                }

                .trend-label {
                  margin-left: 6px;
                  font-size: 12px;
                  opacity: 0.8;
                  line-height: 1.2;
                }
              }

              .metric-details {
                margin-bottom: 20px;
                
                .detail-item {
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  margin-bottom: 8px;
                  font-size: 14px;

                  .detail-label {
                    color: #666;
                  }

                  .detail-value {
                    font-weight: 600;
                    
                    &.excellent {
                      color: #4CAF50;
                    }
                    
                    &.good {
                      color: #FF9800;
                    }
                    
                    &.poor {
                      color: #F44336;
                    }
                  }
                }
              }

              .metric-progress {
                margin-bottom: 15px;
                
                mat-progress-bar {
                  height: 8px;
                  border-radius: 4px;
                  overflow: hidden;
                  
                  &.success-progress {
                    ::ng-deep .mat-progress-bar-fill::after {
                      background: linear-gradient(90deg, #4CAF50, #8BC34A);
                    }
                  }
                  
                  &.warning-progress {
                    ::ng-deep .mat-progress-bar-fill::after {
                      background: linear-gradient(90deg, #FF9800, #FFC107);
                    }
                  }
                  
                  &.error-progress {
                    ::ng-deep .mat-progress-bar-fill::after {
                      background: linear-gradient(90deg, #F44336, #FF5722);
                    }
                  }
                }
              }
            }

            .metric-actions {
              display: flex;
              justify-content: flex-end;
              gap: 10px;
              margin-top: auto;
              padding-top: 15px;
              
              button {
                width: 36px;
                height: 36px;
                border-radius: 50%;
                background: rgba(33, 150, 243, 0.1);
                color: #2196F3;
                border: 1px solid rgba(33, 150, 243, 0.2);
                transition: all 0.3s ease;
                display: flex;
                align-items: center;
                justify-content: center;
                
                &:hover {
                  background: rgba(33, 150, 243, 0.2);
                  transform: scale(1.1);
                }

                mat-icon {
                  font-size: 18px;
                  width: 18px;
                  height: 18px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  line-height: 1;
                  vertical-align: middle;
                }
              }
            }
          }
        }
      }
    }
  }

  // 晋升规则圆圈按钮样式
  .promotion-rules-btn {
    position: fixed;
    top: 120px;
    right: 30px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(45deg, #FF6B6B, #4ECDC4);
    color: white;
    border: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 1000;
    
    &:hover {
      transform: scale(1.1);
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    }
    
    mat-icon {
      font-size: 24px;
    }
  }

  // 动画效果
  @keyframes pulse {
    0% {
      box-shadow: 0 0 0 0 rgba(33, 150, 243, 0.7);
    }
    70% {
      box-shadow: 0 0 0 10px rgba(33, 150, 243, 0);
    }
    100% {
      box-shadow: 0 0 0 0 rgba(33, 150, 243, 0);
    }
  }

  // 滚动条样式
  ::-webkit-scrollbar {
    width: 8px;
  }

  ::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
  }

  ::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;

    &:hover {
      background: rgba(0, 0, 0, 0.5);
    }
  }

  // 反馈动画
  @keyframes slideInRight {
    from {
      transform: translateX(100%);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }

  @keyframes slideOutRight {
    from {
      transform: translateX(0);
      opacity: 1;
    }
    to {
      transform: translateX(100%);
      opacity: 0;
    }
  }

  // 加载状态样式
  .loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: 12px;
  }

  .loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #e3f2fd;
    border-top: 4px solid #2196f3;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }

  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  // 按钮交互效果增强
  .nav-button {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    
    &::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0;
      height: 0;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 50%;
      transform: translate(-50%, -50%);
      transition: width 0.6s, height 0.6s;
    }
    
    &:active::before {
      width: 300px;
      height: 300px;
    }
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    }
    
    &.active {
      transform: translateY(0);
      box-shadow: 0 4px 15px rgba(33, 150, 243, 0.3);
    }
  }

  // 卡片悬停效果增强
   .chart-card, .performance-card, .recruitment-card, .onboarding-card {
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     
     &:hover {
       transform: translateY(-4px);
       box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
     }
   }

   // 检查点完成动画
   .checkpoint-item {
     transition: all 0.3s ease;
     
     &.completed-animation {
       animation: checkpointComplete 0.6s ease-out;
     }
   }

   @keyframes checkpointComplete {
     0% {
       transform: scale(1);
       background: transparent;
     }
     50% {
       transform: scale(1.05);
       background: rgba(76, 175, 80, 0.1);
     }
     100% {
       transform: scale(1);
       background: transparent;
     }
   }

   // 新人项目悬停效果
   .newbie-item {
     transition: all 0.3s ease;
     cursor: pointer;
     
     &:hover {
       transform: translateX(8px);
       background: rgba(33, 150, 243, 0.05);
       border-left: 4px solid #2196F3;
     }
   }

   // 进度条动画增强
   .newbie-progress {
     .mat-progress-bar {
       transition: all 0.5s ease;
     }
   }

   // 上传区域交互效果
   .upload-zone {
     transition: all 0.3s ease;
     cursor: pointer;
     
     &:hover {
       transform: scale(1.02);
       border-color: #2196F3;
       background: rgba(33, 150, 243, 0.05);
     }
     
     &:active {
       transform: scale(0.98);
     }
   }

   // 晋升规则按钮脉冲效果
   .promotion-rules-btn {
     animation: pulse 2s infinite;
     
     &:hover {
       animation: none;
       transform: scale(1.1);
     }
   }

   @keyframes pulse {
     0% {
       box-shadow: 0 0 0 0 rgba(33, 150, 243, 0.7);
     }
     70% {
       box-shadow: 0 0 0 10px rgba(33, 150, 243, 0);
     }
     100% {
       box-shadow: 0 0 0 0 rgba(33, 150, 243, 0);
     }
   }

   // iOS风格悬浮待办事项按钮
   .ios-floating-todo-container {
     position: fixed;
     bottom: 32px;
     right: 32px;
     z-index: 1000;

     .ios-floating-todo-btn {
       width: 64px;
       height: 64px;
       border-radius: 50%;
       border: none;
       background: linear-gradient(135deg, #007AFF 0%, #5856D6 100%);
       color: white;
       box-shadow: 0 8px 32px rgba(0, 122, 255, 0.3);
       transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
       cursor: pointer;
       position: relative;
       display: flex;
       align-items: center;
       justify-content: center;

       &:hover {
         transform: translateY(-4px) scale(1.05);
         box-shadow: 0 16px 48px rgba(0, 122, 255, 0.4);
       }

       &:active {
         transform: translateY(-2px) scale(1.02);
       }

       .ios-btn-content {
         display: flex;
         align-items: center;
         justify-content: center;
         position: relative;

         mat-icon {
           font-size: 28px;
           width: 28px;
           height: 28px;
         }
       }

       .ios-todo-badge {
         position: absolute;
         top: -8px;
         right: -8px;
         background: #FF3B30;
         color: white;
         border-radius: 50%;
         width: 24px;
         height: 24px;
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 12px;
         font-weight: 700;
         border: 3px solid white;
         box-shadow: 0 2px 8px rgba(255, 59, 48, 0.3);
       }
     }

     // 背景遮罩
     .ios-panel-backdrop {
       position: fixed;
       top: 0;
       left: 0;
       width: 100vw;
       height: 100vh;
       background: rgba(0, 0, 0, 0.4);
       backdrop-filter: blur(8px);
       opacity: 0;
       visibility: hidden;
       transition: all 0.3s ease;
       z-index: 998;

       &.visible {
         opacity: 1;
         visibility: visible;
       }
     }

     // iOS风格待办事项面板
     .ios-todo-panel {
       position: fixed;
       top: 0;
       right: -420px;
       width: 420px;
       height: 100vh;
       background: rgba(255, 255, 255, 0.95);
       backdrop-filter: blur(20px);
       -webkit-backdrop-filter: blur(20px);
       border-left: 1px solid rgba(255, 255, 255, 0.2);
       transition: right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
       z-index: 999;
       display: flex;
       flex-direction: column;
       overflow: hidden;

       &.open {
         right: 0;
       }

       // 面板头部
       .ios-panel-header {
         position: relative;
         padding: 60px 24px 20px;
         background: linear-gradient(135deg, rgba(0, 122, 255, 0.1) 0%, rgba(88, 86, 214, 0.1) 100%);
         border-bottom: 1px solid rgba(0, 0, 0, 0.05);

         .ios-header-blur {
           position: absolute;
           top: 0;
           left: 0;
           right: 0;
           bottom: 0;
           background: rgba(255, 255, 255, 0.8);
           backdrop-filter: blur(20px);
           -webkit-backdrop-filter: blur(20px);
         }

         .ios-header-content {
           position: relative;
           z-index: 1;
           display: flex;
           justify-content: space-between;
           align-items: center;

           h3 {
             margin: 0;
             color: #1D1D1F;
             font-size: 28px;
             font-weight: 700;
             letter-spacing: -0.5px;
           }

           .ios-close-btn {
             width: 36px;
             height: 36px;
             border-radius: 50%;
             border: none;
             background: rgba(0, 0, 0, 0.05);
             color: #007AFF;
             cursor: pointer;
             transition: all 0.2s ease;
             display: flex;
             align-items: center;
             justify-content: center;

             &:hover {
               background: rgba(0, 0, 0, 0.1);
               transform: scale(1.1);
             }

             mat-icon {
               font-size: 20px;
               width: 20px;
               height: 20px;
             }
           }
         }
       }

       // 面板内容
       .ios-panel-content {
         flex: 1;
         overflow-y: auto;
         padding: 16px;
         scroll-behavior: smooth;

         &::-webkit-scrollbar {
           width: 4px;
         }

         &::-webkit-scrollbar-track {
           background: transparent;
         }

         &::-webkit-scrollbar-thumb {
           background: rgba(0, 0, 0, 0.2);
           border-radius: 2px;
         }

         // iOS风格待办事项
         .ios-todo-item {
           background: rgba(255, 255, 255, 0.9);
           border-radius: 16px;
           margin-bottom: 12px;
           box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
           transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
           border: 1px solid rgba(0, 0, 0, 0.05);
           overflow: hidden;
           display: flex;
           position: relative;

           &:hover {
             transform: translateY(-2px);
             box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
           }

           &.completed {
             opacity: 0.7;
             background: rgba(52, 199, 89, 0.05);
             border-color: rgba(52, 199, 89, 0.2);

             .ios-todo-title {
               text-decoration: line-through;
               color: #8E8E93;
             }
           }

           &.in-progress {
             border-left: 4px solid #FF9500;
             background: rgba(255, 149, 0, 0.05);
           }

           // 拖拽手柄
           .ios-drag-handle {
             width: 24px;
             display: flex;
             align-items: center;
             justify-content: center;
             background: rgba(0, 0, 0, 0.02);
             cursor: grab;
             transition: background 0.2s ease;

             &:hover {
               background: rgba(0, 0, 0, 0.05);
             }

             &:active {
               cursor: grabbing;
             }

             .ios-drag-dots {
               display: flex;
               flex-direction: column;
               gap: 2px;

               span {
                 width: 3px;
                 height: 3px;
                 background: #C7C7CC;
                 border-radius: 50%;
               }
             }
           }

           // 待办事项内容
           .ios-todo-content {
             flex: 1;
             padding: 16px;

             .ios-todo-header {
               display: flex;
               align-items: flex-start;
               gap: 12px;
               margin-bottom: 12px;

               .ios-todo-icon {
                 width: 40px;
                 height: 40px;
                 border-radius: 12px;
                 display: flex;
                 align-items: center;
                 justify-content: center;
                 flex-shrink: 0;

                 &.type-resume {
                   background: linear-gradient(135deg, #007AFF, #5856D6);
                   color: white;
                 }

                 &.type-onboarding {
                   background: linear-gradient(135deg, #34C759, #30D158);
                   color: white;
                 }

                 &.type-resignation {
                   background: linear-gradient(135deg, #FF3B30, #FF6B6B);
                   color: white;
                 }

                 mat-icon {
                   font-size: 20px;
                   width: 20px;
                   height: 20px;
                 }
               }

               .ios-todo-title-section {
                 flex: 1;

                 .ios-todo-title {
                   margin: 0 0 4px 0;
                   color: #1D1D1F;
                   font-size: 16px;
                   font-weight: 600;
                   line-height: 1.3;
                 }

                 .ios-todo-description {
                   margin: 0;
                   color: #8E8E93;
                   font-size: 14px;
                   line-height: 1.4;
                 }
               }
             }

             .ios-todo-meta {
               display: flex;
               gap: 12px;
               margin-bottom: 16px;

               .ios-priority-indicator {
                 display: flex;
                 align-items: center;
                 gap: 6px;
                 padding: 4px 8px;
                 border-radius: 8px;
                 background: rgba(0, 0, 0, 0.05);

                 .ios-priority-dot {
                   width: 8px;
                   height: 8px;
                   border-radius: 50%;
                 }

                 .ios-priority-text {
                   font-size: 12px;
                   font-weight: 500;
                   color: #8E8E93;
                 }

                 &.priority-high {
                   background: rgba(255, 59, 48, 0.1);
                   .ios-priority-dot { background: #FF3B30; }
                   .ios-priority-text { color: #FF3B30; }
                 }

                 &.priority-medium {
                   background: rgba(255, 149, 0, 0.1);
                   .ios-priority-dot { background: #FF9500; }
                   .ios-priority-text { color: #FF9500; }
                 }

                 &.priority-low {
                   background: rgba(52, 199, 89, 0.1);
                   .ios-priority-dot { background: #34C759; }
                   .ios-priority-text { color: #34C759; }
                 }
               }

               .ios-status-indicator {
                 padding: 4px 8px;
                 border-radius: 8px;
                 font-size: 12px;
                 font-weight: 500;

                 &.status-pending {
                   background: rgba(142, 142, 147, 0.1);
                   color: #8E8E93;
                 }

                 &.status-in_progress {
                   background: rgba(255, 149, 0, 0.1);
                   color: #FF9500;
                 }

                 &.status-completed {
                   background: rgba(52, 199, 89, 0.1);
                   color: #34C759;
                 }
               }
             }

             .ios-todo-actions {
               display: flex;
               gap: 8px;

               .ios-action-btn {
                 display: flex;
                 align-items: center;
                 gap: 6px;
                 padding: 8px 12px;
                 border-radius: 12px;
                 border: none;
                 font-size: 14px;
                 font-weight: 500;
                 cursor: pointer;
                 transition: all 0.2s ease;

                 mat-icon {
                   font-size: 16px;
                   width: 16px;
                   height: 16px;
                 }

                 &.ios-complete-btn {
                   background: rgba(52, 199, 89, 0.1);
                   color: #34C759;

                   &:hover {
                     background: rgba(52, 199, 89, 0.2);
                   }
                 }

                 &.ios-start-btn {
                   background: rgba(0, 122, 255, 0.1);
                   color: #007AFF;

                   &:hover {
                     background: rgba(0, 122, 255, 0.2);
                   }
                 }

                 &.ios-reset-btn {
                   background: rgba(142, 142, 147, 0.1);
                   color: #8E8E93;

                   &:hover {
                     background: rgba(142, 142, 147, 0.2);
                   }
                 }
               }
             }
           }
         }

         // 空状态
         .ios-empty-state {
           text-align: center;
           padding: 60px 20px;
           color: #8E8E93;

           mat-icon {
             font-size: 64px;
             width: 64px;
             height: 64px;
             margin-bottom: 16px;
             opacity: 0.5;
           }

           h4 {
             margin: 0 0 8px 0;
             font-size: 18px;
             font-weight: 600;
           }

           p {
             margin: 0;
             font-size: 14px;
           }
         }
       }

       // 面板底部
       .ios-panel-footer {
         padding: 16px 24px 32px;
         background: rgba(255, 255, 255, 0.9);
         border-top: 1px solid rgba(0, 0, 0, 0.05);

         .ios-add-todo-btn {
           width: 100%;
           padding: 16px;
           border-radius: 12px;
           border: none;
           background: linear-gradient(135deg, #007AFF, #5856D6);
           color: white;
           font-size: 16px;
           font-weight: 600;
           cursor: pointer;
           transition: all 0.2s ease;
           display: flex;
           align-items: center;
           justify-content: center;
           gap: 8px;

           &:hover {
             transform: translateY(-1px);
             box-shadow: 0 4px 16px rgba(0, 122, 255, 0.3);
           }

           mat-icon {
             font-size: 20px;
             width: 20px;
             height: 20px;
           }
         }
       }
     }
   }