/* 头部按钮样式优化 - 版本 1.0.0 */
.custom-header-theme .header-btn-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  padding: 6px 8px !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  overflow: hidden !important;
}

.custom-header-theme .header-btn-item::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: linear-gradient(135deg, var(--el-color-primary) 0%, var(--el-color-primary-light-3) 100%) !important;
  opacity: 0 !important;
  transition: opacity 0.2s ease !important;
  border-radius: 8px !important;
  z-index: 0 !important;
}

.custom-header-theme .header-btn-item > * {
  position: relative !important;
  z-index: 1 !important;
}

.custom-header-theme .header-btn-item i {
  font-size: 1.125rem !important;
  transition: transform 0.2s ease !important;
}

.custom-header-theme .header-btn-item .text-xs {
  font-size: 0.65rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  opacity: 0.9 !important;
}

.custom-header-theme .header-btn-item:hover {
  background: var(--el-color-info-light-9) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.custom-header-theme .header-btn-item:hover::before {
  opacity: 0.05 !important;
}

.custom-header-theme .header-btn-item:hover i {
  transform: scale(1.1) !important;
}

.custom-header-theme .header-btn-item:active {
  transform: translateY(0) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1) !important;
}