/* 原有样式保持不变 */
/* 固定的三个工具 */
.gradient-card {
  /* 外层容器控制圆角和渐变背景 */
  width: 60px;
  height: 180px;
  padding: 2px; /* 预留边框宽度 */
  border-radius: 32px; /* 圆角稍大于内部，确保边框完全圆角 */
  background: linear-gradient(to bottom, #6699ff, #9966ff); 
 position: fixed;
 right: 0;
 top: 50%;
 transform: translateY(-50%); /* 垂直居中 */
 z-index: 100; /* 确保在页面上层 */
}

.borders{
       background: linear-gradient(to right, 
    transparent, 
    #6699ff, 
    #9966ff, 
    transparent);
     width: 100%;
      height: 1.9px; /* 横线高度，可根据需要调整 */
/* 可选：添加边距控制位置 */
margin: 16px 0;
}
.card-inner {
  /* 内部容器承载内容，实现圆角效果 */
  width: 100%;
  height: 100%;
  background-color: white; /* 内部背景色，覆盖外层渐变 */
  border-radius: 30px; /* 内部圆角，比外层小2px避免露出底色 */
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  padding: 10px 0;
  box-sizing: border-box;
}

.card-section {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #f0f8ff;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 2px 4px rgba(102, 153, 255, 0.15); /* 增加图标背景阴影 */
  position: relative; /* 新增：为提示面板定位 */
}

.card-section i {
  font-size: 16px;
  color: #6699ff;
  transition: transform 0.3s ease; /* 悬停动画 */
}

.card-section:hover i {
  transform: scale(1.2); /* 悬停放大效果 */
}

.card-section{
  cursor: pointer;
}

/* 新增提示面板样式 */
.tooltip-panel {
  position: absolute;
  right: 45px; /* 位于图标左侧 */
  top: 50%;
  transform: translateY(-50%);
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.15);
  padding: 15px;
  width: 200px;
  display: block; 
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 99; /* 确保在其他内容上层 */
}

.tooltip-panel.show {
    display: block;       /* 保持原来的显示方式 */
    opacity: 1;           /* 渐变显示 */
    pointer-events: auto; /* 可以点击 */
    transition: opacity 0.3s ease; /* 平滑过渡 */
}

/* 小三角指示符 */
.tooltip-panel::after {
  content: '';
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  border-width: 10px 0 10px 10px;
  border-style: solid;
  border-color: transparent transparent transparent white;
}

/* 提示面板内容样式 */
.tooltip-panel h4 {
  margin: 0 0 10px 0;
  color: #333;
  font-size: 16px;
  font-weight: 600;
}

.tooltip-panel p {
  margin: 5px 0;
  color: #666;
  font-size: 14px;
  line-height: 1.5;
}

/* 复制按钮样式 */
.copy-btn {
  margin-top: 10px;
  padding: 5px 12px;
  background-color: #6699ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  transition: background-color 0.2s;
}

.copy-btn:hover {
  background-color: #5588ee;
}

/* 复制成功提示 */
.copy-success {
  color: #28a745;
  font-size: 13px;
  margin-top: 8px;
  display: none;
}
    

/* 新增的提示面板样式（不影响原有样式） */
.tooltip-panel {
    position: absolute;
    right: 70px; /* 位于图标左侧 */
    top: 50%;
    transform: translateY(-50%);
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.15);
    padding: 15px;
    width: 220px;
    display: none; /* 默认隐藏 */
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 99;
}

/* 小三角指示符 */
.tooltip-panel::after {
    content: '';
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
    border-width: 10px 0 10px 10px;
    border-style: solid;
    border-color: transparent transparent transparent white;
}

.tooltip-panel h4 {
    margin: 0 0 10px 0;
    color: #333;
    font-size: 16px;
}

.tooltip-panel p {
    margin: 5px 0;
    color: #666;
    font-size: 14px;
}

.copy-btn {
    margin-top: 10px;
    padding: 5px 12px;
    background-color: #6699ff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
}

.copy-btn:hover {
    background-color: #5588ee;
}

.copy-success {
    color: #28a745;
    font-size: 13px;
    margin-top: 8px;
    display: none;
}

/* 关键：让卡片区域相对定位，确保提示面板定位正确 */
.card-section {
    position: relative;
}