#footer-icon {
    border-radius: 12px 12px 0 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding-bottom: 1rem;
    align-items: center;
    margin: auto;
    max-width: 1200px;
    width: 97%;
}

#footer-avatar {
    border-radius: 50%;
    width: 60px;
    height: 60px;
    margin: 0 1rem;
    cursor: pointer;
    transition: all .25s;
}

.avatar-link {
    height: 40px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1rem;
    background-color: #363636e2; /* 默认的深灰色背景 */
    border-radius: 3rem;
    transition: all .25s; /* 确保背景色变化有过渡效果 */
}

/* 新增或修改：悬停时只改变背景色 */
.avatar-link:hover {
    background-color: #49b1f5 !important; /* 鼠标放上时变成更浅的灰色 */
}

/* 非常重要：确保图标本身的颜色在悬停时保持不变 */
.avatar-link:hover i {
    color: #fff !important;
}

/* --- 新增：夜间模式下的头像链接样式 --- */
[data-theme="dark"] .avatar-link {
    background-color: #ffffff !important; /* 圆圈变白 */
}

[data-theme="dark"] .avatar-link i {
    color: #000000 !important; /* 图标变黑 */
}

/* 夜间模式悬停效果：圆圈变橙黄，图标变白 */
[data-theme="dark"] .avatar-link:hover {
    background-color: #f2b94b !important; /* 橙黄色 */
}
[data-theme="dark"] .avatar-link:hover i {
    color: #ffffff !important; /* 图标变白 */
}

/* 夜间模式下底部文字变白 */
[data-theme="dark"] #footer-wrap,
[data-theme="dark"] .footer-copyright,
[data-theme="dark"] .footer-content,
[data-theme="dark"] .copyright {
    color: #ffffff !important;
}
[data-theme="dark"] #footer-wrap a,
[data-theme="dark"] .footer-copyright a,
[data-theme="dark"] .footer-content a,
[data-theme="dark"] .copyright a {
    color: #ffffff !important;
}

/* 日间模式下底部文字变深灰 */
[data-theme="light"] #footer-wrap,
[data-theme="light"] .footer-copyright,
[data-theme="light"] .footer-content,
[data-theme="light"] .copyright {
    color: #4c4c4d !important;
}
[data-theme="light"] #footer-wrap a,
[data-theme="light"] .footer-copyright a,
[data-theme="light"] .footer-content a,
[data-theme="light"] .copyright a {
    color: #4c4c4d !important;
}

/* 兼容性处理：如果没有 data-theme 属性（默认情况），也应用深灰 */
#footer-wrap,
.footer-copyright,
.footer-content,
.copyright {
    color: #4c4c4d;
}
#footer-wrap a,
.footer-copyright a,
.footer-content a,
.copyright a {
    color: #4c4c4d;
}

#footer-avatar-left, #footer-avatar-right {
    display: flex;
}

.avatar-link i {
   font-size: 1.25rem;
   color: #fff !important;
   }



/* 手机端响应式布局 */
@media screen and (max-width: 768px) {
  /* 1. 将主容器改为垂直排列 */
  #footer-icon {
    flex-direction: column;
  }

  /* 2. 调整左右容器顺序 */
  #footer-avatar-left {
    order: 1; /* 放在最上面 */
  }
  
  #footer-avatar {
    order: 2; /* 中间顺序，但下一步会隐藏 */
    display: none !important; /* 3. 隐藏中间头像 */
  }
  
  #footer-avatar-right {
    order: 3; /* 放在最下面 */
  }

  /* 4. (可选) 调整左右容器内部图标的间距，使布局更紧凑 */
  #footer-avatar-left,
  #footer-avatar-right {
    justify-content: center;
    margin: 0.5rem 0; /* 减小上下外边距 */
  }
  
  .avatar-link {
    margin: 0.5rem; /* 减小单个图标的边距 */
  }
}

/*------------------------------------------------------------------------------------------------------------------------------------

/* 计时器专用样式 */
.footer-content {
  text-align: center;
  width: 100%;
}

#runtime {
  width: fit-content;
  color: #fff;
  padding: 0 10px;
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.7);
  font-size: 10rem;
  margin: 0 5px;
  display: inline-block;
  font-family: inherit;
  font-weight: normal;
  line-height: 1.5;
  transition: all 0.3s ease;
}

/* 暗黑模式适配 */
[data-theme="dark"] #runtime {
  color: #28b4c8;
  box-shadow: 0 0 5px rgba(28, 69, 218, 0.71);
  background-color: rgba(0, 0, 0, 0.5);
}

/* 计时器内部文字继承字体 */
#timeDate,
#times {
  font-family: inherit;
  font-weight: inherit;
}


/* 底部徽章区域样式 */
#footer-badge {
  text-align: center;
  margin: 14px 0;
}
#footer-badge img {
  transition: opacity 0.3s ease;
  opacity: 0.8;
}
#footer-badge img:hover {
  opacity: 1;
  transform: translateY(-2px);
}

/* 精确控制版权文字居中 */
.footer-copyright .copyright {
    display: block; /* 关键：将行内元素改为块级，便于居中控制 */
    text-align: center !important;
    width: 100%;
    margin: 0 auto; /* 水平居中 */
}