/* 左侧悬浮标签栏 */
.side-tab-bar {
  position: fixed;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 15px 10px;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
}

.side-tab {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  background: #fff;
  border: 2px solid #f0f4f8;
  position: relative;
  text-decoration: none;
}

.side-tab:hover {
  transform: scale(1.1);
  background: #3b82f6;
  border-color: #3b82f6;
  color: white;
}

.side-tab i {
  font-size: 20px;
  color: #64748b;
}

.side-tab:hover i {
  color: white;
}

.side-tab.active {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  border-color: #3b82f6;
  color: white;
}

.side-tab.active i {
  color: white;
}

.side-tab .tooltip {
  position: absolute;
  left: 70px;
  background: #333;
  color: white;
  padding: 6px 12px;
  border-radius: 6px;
  white-space: nowrap;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.side-tab:hover .tooltip {
  opacity: 1;
}

/* 页面背景渐变效果 */
body {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(147, 51, 234, 0.05) 50%, rgba(236, 72, 153, 0.1) 100%);
  background-attachment: fixed;
}

.hero {
  background: radial-gradient(circle at 50% 50%, rgba(59, 130, 246, 0.15) 0%, rgba(255, 255, 255, 0) 70%);
}

/* 确保所有页面区域都应用背景效果 */
section.projects,
section.blog,
section.about,
.hero-content,
.blog-container,
.project-hero {
  position: relative;
  overflow: hidden;
}

section.projects::before,
section.blog::before,
section.about::before,
.hero-content::before,
.blog-container::before,
.project-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(59, 130, 246, 0.03) 0%, rgba(147, 51, 234, 0.03) 50%, rgba(236, 72, 153, 0.03) 100%);
  z-index: -1;
  border-radius: inherit;
}

/* 确保卡片内容在背景之上显示 */
.blog-card,
.tool-card,
.blog-list,
.tools-cards {
  position: relative;
  z-index: 1;
}

@media (max-width: 768px) {
  .side-tab-bar {
    left: 10px;
    padding: 10px 5px;
  }
  .side-tab {
    width: 40px;
    height: 40px;
  }
  .side-tab i {
    font-size: 16px;
  }
}