/*底部 备案号 版权*/
.db {
  margin-top: 8rem; /* 与上方内容保持间距 */
  padding: 2rem 0;
  width: 100%;
  position: relative;
  border-top: 1px solid rgba(107, 144, 128, 0.1); /* 顶部装饰线 */
}
.xx {
  width: 36vh;
  height: 38vh;
  transition: all 1s;
  float: right;
  margin-right: 16vh;
  margin-top: 8vh;
}

.xx:hover {
  width: 46vh;
  height: 48vh;
}

.beian {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem 2rem;
  background: rgba(244, 241, 232, 0.9); /* 与主色调协调 */
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.beian:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 20px rgba(107, 144, 128, 0.15);
}

.bottom {
  font-size: 13px;
  text-align: center;
  color: rgba(74, 74, 72, 0.8); /* 与正文颜色协调 */
  font-weight: 530;
  letter-spacing: 2px;
  line-height: 160%;
}
/* 图标样式优化 */
.bottom svg {
  transition: all 0.3s ease;
  /* filter: drop-shadow(0 1px 1px rgb(0, 0, 0)); */
}

.bottom a:hover svg {
  transform: scale(1.15);
}
.icp {
  padding-bottom: 0;
}

.ga {
  margin-right: 3vh;
  margin-top: 0;
}

.ga img {
  margin-top: 0;
  margin-bottom: 0;
}

/* 链接颜色过渡 */
.bottom a {
  color: rgba(74, 74, 72, 0.8);
  transition: color 0.3s ease;
  position: relative;
  text-decoration: none;
}

.bottom a:hover {
  color: #6b9080; /* 使用主题色 */
}
/* 鼠标指针悬停时改变颜色 */
.bottom svg:hover path {
  fill: #6b9080; /* 鼠标悬停时图标颜色 */
}
/* 悬浮下划线效果 */
.bottom a::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: #6b9080;
  transition: width 0.3s ease;
}

.bottom a:hover::after {
  width: 100%;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .db {
    margin-top: 4rem;
    padding: 1rem;
  }

  .beian {
    padding: 1rem;
    border-radius: 8px;
  }

  .bottom {
    font-size: 0.8rem;
  }

  .bottom svg {
    margin: 0 0.4rem;
    width: 24px;
    height: 24px;
  }
}

/* 备案信息 - 深色模式适配 */
.dark-mode {
  .db {
    border-top-color: rgba(107, 144, 128, 0.2); /* 调整顶部边框透明度 */
  }

  .beian {
    background: rgba(40, 40, 40, 0.9); /* 深色背景 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); /* 深色阴影 */

    &:hover {
      box-shadow: 0 8px 20px rgba(107, 144, 128, 0.2); /* 悬停光晕效果 */
    }
  }

  .bottom {
    color: rgba(230, 230, 230, 0.8); /* 文字颜色 */

    a {
      color: rgba(230, 230, 230, 0.8);

      &:hover {
        color: var(--secondary); /* 使用主题绿色 */
      }
    }

    /* SVG图标颜色适配 */
    svg path {
      fill: #e6e6e6; /* 统一图标颜色 */
    }

    /* 图标悬停效果 */
    a:hover svg {
      filter: drop-shadow(0 0 4px rgba(107, 144, 128, 0.5)); /* 添加光晕 */

      path {
        fill: var(--secondary); /* 悬停颜色变化 */
      }
    }

    /* 备案图标亮度调整 */
    .ga img {
      filter: brightness(1.8); /* 提高深色模式图标可见性 */
    }
  }

  /* 下划线动画适配 */
  .bottom a::after {
    background: var(--secondary);
  }

  /* 技术标签适配 */
  .tech-tags span {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-dark);
  }

  /* 版权信息微调 */
  #sitetime,
  .copyright {
    color: rgba(230, 230, 230, 0.8);
  }
}

/* 增强过渡效果 */
.beian,
.bottom a,
.bottom svg {
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 移动端优化 */
@media (max-width: 768px) {
  .dark-mode {
    .beian {
      background: rgba(30, 30, 30, 0.95); /* 更深的背景提升可读性 */
    }

    .bottom {
      font-size: 0.75rem;

      svg {
        width: 22px;
        height: 22px;
      }
    }
  }
}