/* ==================================
   1. 全局背景图设置 (核心基础)
   ================================== */
#web_bg {
  /* 这里换成你自己的图片路径 */
  background-attachment: fixed;       /* 核心：背景图固定不动 */
  background-size: cover;             /* 核心：铺满全屏 */
  background-position: center;
  background-repeat: no-repeat;
}

/* ==================================
   2. 头部与页脚彻底透明化 (去除遮罩)
   这就是你截图里代码的作用：把默认的黑白遮罩层去掉
   ================================== */
#page-header,
#footer {
  background: transparent !important;
}

/* 去除白天模式的伪类遮罩 */
#page-header::before,
#footer::before {
  background: transparent !important;
}

/* 去除夜间模式的伪类遮罩 */
[data-theme="dark"] #page-header::before,
[data-theme="dark"] #footer::before {
  background: transparent !important;
}

/* ==================================
   3. 文章卡片磨砂玻璃效果 (Glassmorphism)
   让文章背景半透明，否则背景图会被纯白卡片挡住
   ================================== */
:root {
  /* 0.85 代表透明度，数值越小越透。建议 0.8 到 0.9 之间 */
  --card-bg: rgba(255, 255, 255, 0.85);   
  --btn-bg: rgba(255, 255, 255, 0.85);    
  --sidebar-bg: rgba(255, 255, 255, 0.85);
}

/* 夜间模式下的卡片透明度 (深色背景) */
[data-theme="dark"] {
  --card-bg: rgba(25, 25, 25, 0.8);
}

/* ==================================
   Butterfly 主题右下角按钮 - 深色风格样式
   ================================== */

/* 1. 设置按钮的基本样式：深色背景、圆角、浅色图标 */
/* 修改选择器以适应所有情况 */
#rightside > div > button,
#rightside > div > a,
#rightside > button,
#rightside > a {
    /* 这里保持原来的样式内容不变，如下： */
    background-color: rgba(40, 40, 40, 0.9) !important;
    color: #ccc !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    margin-bottom: 6px !important;
    border: none !important;
    box-shadow: none !important;
    width: 38px !important;
    height: 38px !important;
    line-height: 38px !important;
    display: flex !important;      /* 新增：确保内容居中 */
    align-items: center !important; /* 新增：确保内容居中 */
    justify-content: center !important; /* 新增：确保内容居中 */
}

/* 2. 特别指定“夜间模式”按钮的图标颜色为橙色/黄色 */
/* 注意：这里假设夜间模式按钮的类名包含 'darkmode'，如果无效可能需要检查元素 */
#rightside > div > button.darkmode_switchbutton > i,
#rightside > div > a#darkmode_click > i {
    color: #f39c12 !important; /* 橙黄色 */
}

/* 3. 鼠标悬停时的效果 */
#rightside > div > button:hover,
#rightside > div > a:hover {
    /* 悬停时背景稍微变亮 */
    background-color: rgba(60, 60, 60, 0.9) !important;
    /* 悬停时图标变白 */
    color: #fff !important;
}


/* ==================================
   顶部导航栏布局修改：菜单居中 + 搜索靠右
   ================================== */

/* 仅在电脑端生效 (宽度大于768px)，避免破坏手机端样式 */
@media screen and (min-width: 768px) {
    
    /* 1. 将“首页、归档、标签...”这些菜单项 绝对定位到页面正中间 */
    #nav .menus_items {
        position: absolute !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        /* 确保菜单文字不换行 */
        white-space: nowrap !important;
    }

    /* 2. 确保原本的菜单容器（现在只剩下搜索按钮了）依然靠右 */
    #nav #menus {
        /* 强制靠右对齐 */
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
        /* 避免被中间的菜单挡住 */
        z-index: 10 !important;
    }

    /* 3. 可选：微调搜索按钮的位置，让它看起来更舒服 */
    #search-button {
        padding-left: 10px; 
    }

    /* 右键菜单 */
#rightMenu {
  display: none;
  position: fixed;
  width: 160px;
  height: fit-content;
  top: 10%;
  left: 10%;
  background-color: var(--card-bg);
  border: 1px solid var(--font-color);
  border-radius: 8px;
  z-index: 99999; /* 提高层级，防止被遮挡 */
  box-shadow: var(--card-box-shadow); /* 增加阴影更美观 */
}
#rightMenu .rightMenu-group {
  padding: 7px 6px;
}
#rightMenu .rightMenu-group:not(:nth-last-child(1)) {
  border-bottom: 1px solid var(--font-color);
}
#rightMenu .rightMenu-group.rightMenu-small {
  display: flex;
  justify-content: space-between;
}
#rightMenu .rightMenu-group .rightMenu-item {
  height: 30px;
  line-height: 30px;
  border-radius: 8px;
  transition: 0.3s;
  color: var(--font-color);
  display: block; /* 修复可能得排版问题 */
  text-decoration: none;
}
#rightMenu .rightMenu-group.rightMenu-line .rightMenu-item {
  display: flex;
  height: 40px;
  line-height: 40px;
  padding: 0 4px;
}
#rightMenu .rightMenu-group .rightMenu-item:hover {
  background-color: var(--text-bg-hover);
}
#rightMenu .rightMenu-group .rightMenu-item i {
  display: inline-block;
  text-align: center;
  line-height: 30px;
  width: 30px;
  height: 30px;
  padding: 0 5px;
}
#rightMenu .rightMenu-group .rightMenu-item span {
  line-height: 30px;
}
#rightMenu .rightMenu-group.rightMenu-line .rightMenu-item * {
  height: 40px;
  line-height: 40px;
}
.rightMenu-group.hide {
  display: none;
}
}


/* 1. 页脚总容器：强制垂直排列 */
#footer-wrap {
  display: flex !important;
  flex-direction: column !important; /* 关键：让元素从上到下堆叠 */
  align-items: center !important;    /* 水平居中 */
  justify-content: center !important;
  padding: 20px 0 !important;
}

/* 2. 统计信息区域：高清胶囊样式 */
.statistics-footer {
  /* 布局 */
  display: flex;
  flex-wrap: wrap;           /* 允许换行 */
  justify-content: center;
  margin-bottom: 15px;       /* 胶囊和下方版权信息的距离 */
  line-height: 2;
  
  /* --- 核心：高清背景 --- */
  background: rgba(0, 0, 0, 0.6);   /* 深色半透明背景 */
  backdrop-filter: blur(5px);       /* 毛玻璃模糊 */
  padding: 5px 20px;                /* 内边距 */
  border-radius: 50px;              /* 圆角 */
  border: 1px solid rgba(255, 255, 255, 0.1); /* 微弱的白边，增加精致感 */
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);      /* 淡淡的阴影 */
  
  /* 宽度自适应 */
  width: fit-content;
  max-width: 95vw; /* 防止手机端溢出 */
}

/* 3. 单个统计项 (纯白文字) */
.footer-item {
  margin: 0 8px;
  white-space: nowrap;
  
  /* 强制文字清晰度 */
  color: #ffffff !important;
  font-weight: 500;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); /* 文字黑阴影，防背景干扰 */
  transition: all 0.3s;
}

/* 4. 图标高亮 */
.footer-item i {
  margin-right: 5px;
  color: #49b1f5 !important; /* 蓝色图标 */
  text-shadow: none;         /* 图标不加阴影，保持鲜亮 */
}

/* 鼠标悬停 */
.footer-item:hover {
  transform: translateY(-2px);
  color: #49b1f5 !important;
}

/* 5. 下方的版权和框架信息 */
/* 5. 下方的版权和框架信息 - 高清修复版 */
.copyright, 
.framework-info {
  font-size: 14px;
  margin: 4px 0;
  
  /* 核心修复：强制纯白 + 黑色阴影 */
  color: #ffffff !important; 
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9); /* 加重阴影浓度 */
  font-weight: 500; /* 稍微加粗让字更有分量 */
}

/* 修复链接文字 (Hexo, Butterfly) 的颜色 */
.framework-info a {
  color: #ffffff !important;
  transition: all 0.3s;
}

/* 链接悬停时变蓝，增加交互感 */
.framework-info a:hover {
  color: #49b1f5 !important;
  text-shadow: 0 0 3px rgba(73, 177, 245, 0.5); /* 发光效果 */
}

/* ==================================
   文章头部样式 - 精准修复版
   ================================== */

/* 1. 头部整体定位与居中 */
#page-header #post-info {
  position: absolute;
  bottom: 30px;
  left: 0;
  width: 100%;
  text-align: center !important;
  padding: 0 20px;
  box-sizing: border-box;
}

/* 2. 标题样式 */
#page-header #post-info .post-title {
  font-size: 2.5rem !important;
  font-weight: bold;
  color: #fff !important;
  margin-bottom: 15px !important;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
}

/* 3. 元信息通用设置 (字体、颜色、阴影) */
#page-header #post-info #post-meta {
  color: #eee !important;
  font-size: 14px !important;
  line-height: 2 !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}

/* 4. 强制两行居中排列 */
#page-header #post-info .meta-firstline,
#page-header #post-info .meta-secondline {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  width: 100%;
}

/* ==================================
   【核心修复】分隔符精准注入
   ================================== */

/* 第一步：隐藏主题自带的所有分隔符 */
#page-header #post-info .post-meta-separator {
  display: none !important;
}

/* 第二步：定义竖线样式 (公用) */
.custom-separator::after {
  content: "|" !important;
  margin: 0 16px !important; /* 想要更宽就改这里，比如 20px */
  color: rgba(255, 255, 255, 0.6);
  font-weight: normal;
  display: inline-block;
}

/* 第三步：在【发表日期】后面加竖线 (分隔 更新日期) */
#page-header #post-info .post-meta-date-created::after {
  content: "|" !important;
  margin: 0 16px !important;
  color: rgba(255, 255, 255, 0.6);
}

/* 第四步：在【字数】后面加竖线 (分隔 阅读时长) */
#page-header #post-info .word-count::after {
  content: "|" !important;
  margin: 0 16px !important;
  color: rgba(255, 255, 255, 0.6);
}

/* 第五步：在【阅读时长模块】后面加竖线 (分隔 浏览量) */
/* 注意：.post-meta-wordcount 包含了字数和时长，所以它的后面就是浏览量 */
#page-header #post-info .post-meta-wordcount::after {
  content: "|" !important;
  margin: 0 16px !important;
  color: rgba(255, 255, 255, 0.6);
}

/* ==================================
   细节优化
   ================================== */

/* 图标与文字间距 */
#page-header #post-info i.post-meta-icon {
  margin-right: 6px !important;
}

/* 链接文字样式 */
#page-header #post-info a {
  color: #fff !important;
  text-decoration: none !important;
  transition: all 0.3s;
}
#page-header #post-info a:hover {
  color: #49b1f5 !important;
  text-decoration: underline !important;
}


/* 恋爱计时侧边栏样式 */
.card-love .couple-box {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
}

.card-love .couple-pic {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid #eee;
  padding: 2px;
  object-fit: cover;
  transition: transform 0.3s;
}

.card-love .couple-pic:hover {
  transform: scale(1.1);
}

.card-love .couple-heart {
  margin: 0 15px;
  animation: heartbeat 1.3s ease-in-out infinite;
  
  /* 如果觉得图标位置不正，可以加这一行微调 */
  vertical-align: middle; 
}

#love-time {
  text-align: center;
  font-size: 14px;
}

.love-text {
  color: #999;
  margin-bottom: 5px;
}

.love-timer span {
  font-weight: bold;
  color: var(--text-highlight-color); /* 跟随主题高亮色 */
  margin: 0 2px;
  font-size: 16px;
}
/* 让恋爱计时区域显示为可点击状态 */
#love-time {
  cursor: pointer;
  user-select: none; /* 防止点击时选中文字，体验更好 */
  transition: all 0.3s;
}

/* 鼠标悬停时稍微变亮一点，增加交互感 */
#love-time:hover {
  opacity: 0.8;
}

/* 补充的心跳动画关键帧 */
@keyframes heartbeat {
  0% { transform: scale(1); }
  14% { transform: scale(1.3); }
  28% { transform: scale(1); }
  42% { transform: scale(1.3); }
  70% { transform: scale(1); }
}


/* 首页 - 蓝色 (电脑端 + 手机端) */
#page-header .menus_items .fa-home, 
#sidebar-menus .fa-home {
  color: #49b1f5;
}

/* 归档 - 橙色 */
#page-header .menus_items .fa-archive,
#sidebar-menus .fa-archive {
  color: #F97C3C;
}

/* 标签 - 粉色 */
#page-header .menus_items .fa-tags,
#sidebar-menus .fa-tags {
  color: #FF85C0;
}

/* 分类 - 紫色 */
#page-header .menus_items .fa-folder-open,
#sidebar-menus .fa-folder-open {
  color: #9C27B0;
}

/* 关于 - 红色 */
#page-header .menus_items .fa-heart,
#sidebar-menus .fa-heart {
  color: #FF4E6A;
}

#page-header .menus_items .menus_item:hover i {
    transform: scale(1.2) rotate(10deg);
    transition: all 0.3s;
}


/* ==================================
   赞助按钮美化 (修正版 - 适配 post-reward)
   ================================== */

/* 1. 按钮样式重构 */
/* 注意：这里改用了 .post-reward 开头，一定能选中 */
.post-reward .reward-button {
  /* 背景：蓝紫色科技感渐变 */
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%) !important;
  
  /* 字体颜色：强制纯白 */
  color: #ffffff !important;
  
  /* 去除边框，加圆角 */
  border: none !important;
  border-radius: 50px !important;
  
  /* 增加内边距，让按钮变宽变饱满 */
  padding: 10px 35px !important;
  margin-top: 20px !important; /* 增加一点顶部间距 */
  
  /* 字体样式 */
  font-size: 16px !important;
  font-weight: bold !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  
  /* 初始阴影 (发光感) */
  box-shadow: 0 4px 15px rgba(79, 172, 254, 0.4) !important;
  
  /* 动画过渡 */
  transition: all 0.3s ease-in-out !important;
  
  /* 确保块级居中 */
  display: inline-block !important;
  line-height: 2 !important;
}

/* 2. 图标间距 */
.post-reward .reward-button i {
  margin-right: 8px !important;
}

/* 3. 鼠标悬停特效 */
.post-reward .reward-button:hover {
  /* 背景反向渐变 */
  background: linear-gradient(135deg, #00f2fe 0%, #4facfe 100%) !important;
  
  /* 爆发式光晕 */
  box-shadow: 0 8px 25px rgba(0, 242, 254, 0.7) !important;
  
  /* 上浮动画 */
  transform: translateY(-3px) !important;
}