/**
 * Version: 3.5.2
 * Updated: 2025-03-24
 * Author: ©彼岸临窗 oneblogx.com
 *
 * 注释含命名规范，开源不易，如需引用请注明来源:彼岸临窗 https://oneblogx.com。
 * 本主题已取得软件著作权（登记号：2025SR0334142）和外观设计专利（专利号：第7121519号），请严格遵循GPL-2.0协议使用本主题。
 *
 **/


/**默认主题配色**/
:root {
    --color:#161616;
    --theme-color: #ff5050;/**主题色**/
    --theme-color-light: color-mix(in srgb, var(--theme-color) 70%, white 30%);/**主题色浅色**/
    --black: #121212;/**黑标题色**/
    --black-light: #161616;/**摘要\文章数据\评论者信息色**/
    --dark-grey: #757575;
    --grey: #bbbbbb;
    --bg-grey: #f9f9f9;/**框体背景色**/
    --line-grey:#f3f3f3;
    --white: #ffffff;/**白标题色**/
    --bg-white: #ffffff;
    --red: #dd1111; /**点赞色**/
    --blue: #0b80ff;/**a链接选中色**/
    --blue-light: #467ab3;/**a链接色**/
}

.respond {
    border: 1px solid #ddd; /* 添加一个浅灰色边框 */
    padding: 10px;
    border-radius: 5px; /* 可选：添加圆角 */
    margin-bottom: 20px; /* 与评论列表之间留白 */
}

.comment-author-info input.text,
#comment-form textarea {
    border: 1px solid #ccc; /* 默认边框颜色 */
    padding: 5px;
    border-radius: 3px; /* 可选：添加圆角 */
    margin-bottom: 5px;
    width: 100%; /* 使输入框宽度撑满容器 */
    box-sizing: border-box; /* 确保 padding 和 border 不会增加元素总宽度 */
}

.comment-author-info input.text:focus,
#comment-form textarea:focus {
    border-color: #ff5050; /* 可选：聚焦时的边框颜色 */
    outline: none; /* 移除默认的聚焦轮廓 */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* 可选：添加聚焦时的阴影效果 */
}

.comment-md-3 input.text {
    width: calc(100% - 0px); /* 三列布局时调整宽度，考虑间距 */
    margin-right: 20px;
}

.comment-md-3:last-child input.text {
    margin-right: 0; /* 最后一列去除右边距 */
}

.comment-avatar-wrapper {
    position: relative; /* 设置相对定位 */
    display: inline-block; /* 或者你头像的显示方式 */
}

/**黑夜模式配色**/
html.protect-eye {
    background: #191919;
    --theme-color:#254d4b;
    --theme-color-light:#2f4746;
    --white:#dfdfdf;
    --bg-white:#191919;
    --black-light:#808080;
    --black:#cccccc;
    --line-grey:#1e1e1e;
    --bg-grey:#313131;
    --grey:#717171;
    --blue:#748eaf;
    --blue-light:#8093ab;
}


/**黑夜模式图片特殊处理**/
.protect-eye .swiper-slide a:before,.protect-eye .post_img:before,.protect-eye .post_thumb:before,.protect-eye .relate-post:before,.protect-eye .page_thumb:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0 / 30%);
}

.protect-eye .post_content img,.protect-eye .photo img,.protect-eye .book-thumb{
    opacity: 0.8;
}

/**黑夜模式有封面图文章详情页的分类背景色单独处理**/
.protect-eye .category a{
    background: #3f3f3f;
    color: #939393;
}




/* 统计信息容器 */
.statistics-container {
    background: transparent; /* 背景透明 */
    padding: 15px;
    margin: 20px 0;
    border-radius: 12px;
    box-shadow: none; /* 移除阴影 */
}

/* 统计信息标题 */
.statistics-info {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
    position: relative;
    padding-left: 10px;
}

/* 标题左侧的装饰条 */
.statistics-info::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 18px;
    background-color: #ff6a6a; /* 可以根据你的主题色调整 */
    border-radius: 2px;
}

/* 统计列表 */
.statistics-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3列布局 */
    gap: 10px; /* 列间距 */
    list-style: none; /* 去除列表点 */
    padding: 0;
    margin: 0;
    text-align: center;
}

/* 统计项 */
.statistics-list li {
    background: transparent; /* 背景透明 */
    padding: 10px 10px;
    border-radius: 10px;
    transition: transform 0.3s ease-in-out;
    box-shadow: none; /* 移除阴影 */
    border: 1px solid #eee;
}

.statistics-list li:hover {
    transform: translateY(-5px); /* 悬停时上移 */
}

/* 统计数字 */
.statistics-count {
    font-size: 28px;
    font-weight: bold;
    color: #333;
    margin: 0 0 5px 0;
}

/* 统计标题 */
.statistics-title {
    font-size: 14px;
    color: #999;
    margin: 0;
}

/* 手机端适配 */
@media (max-width: 600px) {
    .statistics-list {
        grid-template-columns: repeat(2, 1fr); /* 手机端改为2列 */
    }
}


/* 升级记录卡片
.statistics-list .clickable-card {
    /* 保持原有卡片布局 */
}

.statistics-list .clickable-card:hover {
    background-color: transparent;
    box-shadow: none;
    transform: none;
    cursor: pointer;
}

.statistics-list .clickable-card:active {
    background-color: transparent;
    transform: none;
}




/* 小猫*/
    .post_content {
        position: relative; /* 关键：确保父容器具有相对定位 */
        /* 增加一个 padding-bottom，为小猫图片留出空间，防止它覆盖下面的内容 */
        /* 这个值应该至少大于或等于小猫图片的高度，这里假设小猫高100px，留出120px */
        padding-bottom: 120px; 
    }

    .cat-image-right-aligned {
        position: absolute; /* 绝对定位 */
        right: 0; /* 贴合父容器的右边缘 */
        /*
           调整 bottom 值。
           bottom: 0; 让小猫的底部与 .post_content 的底部（包括其 padding-bottom）对齐。
           如果希望小猫更低，比如抵消 .post_content 的 padding-bottom，可以设置为负值。
           例如，如果 .post_content 的 padding-bottom 是 15px，可以尝试 bottom: -15px;
           根据您最新截图的视觉效果，bottom: 0; 应该能够让它紧贴下方内容区域的边缘。
        */
        bottom: 0; 
        
        width: 100px; /* 根据您的需求调整宽度 */
        height: auto; /* 保持图片比例 */
        margin: 0 !important; /* 移除所有外边距，使用 !important 确保覆盖 */
        padding: 0 !important; /* 移除所有内边距，使用 !important 确保覆盖 */
        transform: scaleX(1); /* 根据您最新提供的图片，小猫是面朝右的，所以移除翻转或者设置为 1 */
        z-index: 1; /* 确保图片在内容上方显示，如果出现遮挡情况 */
    }

    /* 额外的调整，以解决可能存在的间距问题 */
    /* 移除 .post-declaration 和 .tags 下方的多余间距 */
    .post-declaration p {
        margin-bottom: 0 !important;
    }
    .tags {
        margin-bottom: 0 !important;
}







/**不知道哪里的css代码**/
.footer-info {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    padding: 10px 10px; /* 调整上下内边距，保持左右一致 */
    font-size: 12px;
    color: #777; /* 更柔和的文字颜色 */
    width: 100%;
    background-color: #f5f5f5; /* 更浅的背景色 */
    border-top: 1px solid #eee; /* 更细的顶部边框 */
    box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.05); /* 底部阴影，增加层次感 */
}

.footer-info p {
    margin: 0; /* 移除段落默认的 margin */
    line-height: 1.5; /* 调整行高，使文字更舒适 */
}


/* 订阅页面公告样式优化 */
.subscription-notice {
    border: 1px dashed #ccc; /* 虚线边框 */
    padding: 8px; /* 内边距 */
    /* 优化点1: 调整左右边距，使其更窄，增加最大宽度 */
    margin: 10px 5px; /* 上下外边距20px，左右外边距10px */
    text-align: center; /* 文本居中 */
    background-color: #f9f9f9; /* 背景色 */
    border-radius: 4px; /* 圆角 */
    /* 优化点1: 增大最大宽度，使其在移动端占用更多空间 */
    max-width: calc(100% - 20px); /* 100%减去左右各10px的margin */
    /* 优化点2: 移除阴影效果 */
    /* box-shadow: none; */ /* 这一行可以直接删除或注释掉 */
}

.subscription-notice p {
    margin: 0; /* 移除段落默认外边距 */
    font-size: 1em; /* 字体大小 */
    color: #333; /* 字体颜色 */
    line-height: 1.2; /* 行高 */
}



/* RssFeed 插件美化样式 - 最终优化版 (V9 - 再次加大字体) */

/* 整体容器：完全透明，作为所有文章项的包裹 */
.rss-feed-container {
    background-color: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
    border: none !important;
    width: 100%;
    box-sizing: border-box;
    /* 保持整体字体大小的基准，子元素使用em或rem */
    font-size: 18px; /* 基础字体大小，再次加大 */
}

/* 模块标题（已在PHP中移除其HTML，此处仅为防止潜在冲突） */
.rss-feed-container h3 {
    display: none !important; 
}
.rss-feed-container h3:after {
    display: none !important;
}

/* 单个文章条目：无背景卡片，仅通过虚线分割 */
.rss-item {
    background-color: transparent !important; /* 完全透明 */
    padding: 18px 15px !important; /* 上下左右内边距进一步增大 */
    margin: 0; /* 移除外边距，由padding控制留白 */
    border-radius: 0 !important; /* 无圆角 */
    box-shadow: none !important; /* 无阴影 */
    border: none !important; /* 无边框 */
    border-bottom: 1px dashed #ddd; /* 虚线分割线，颜色保持 */
    transition: background-color 0.2s ease-in-out; /* 悬停背景过渡 */
    box-sizing: border-box;
}

.rss-item:last-child {
    border-bottom: none !important; /* 最后一个无分割线 */
}

.rss-item:hover {
    background-color: rgba(0, 0, 0, 0.02); /* 悬停时有轻微背景色提示 */
}

/* 文章头部区域 */
.item-header {
    margin-bottom: 10px; /* 调整与摘要的间距，略微增大 */
}

/* 文章标题及其背景美化 */
.item-title-wrapper {
    display: inline-block; /* 确保背景只包裹文字 */
    line-height: 1.5; /* 保持行高，确保背景显示正常 */
    margin: 0; /* 移除默认margin */
    padding: 0; /* 移除默认padding */
}

.item-title {
    font-size: 1.45em; /* 标题字号：基于.rss-feed-container的18px，即 18 * 1.45 = 26.1px */
    font-weight: 600;
    color: #333;
    text-decoration: none;
    transition: color 0.2s ease-in-out;
    display: inline; /* 确保背景色和文字对齐 */
    background: linear-gradient(to right, #eef5ff 50%, transparent 50%); /* 背景色从左到右一半 */
    background-size: 200% 100%; /* 背景尺寸为宽度的两倍 */
    background-position: right bottom; /* 初始背景位置，让透明部分在左边 */
    padding: 0 5px; /* 给文字左右留一点点背景边距，略微增大 */
    border-radius: 4px; /* 轻微圆角 */
    transition: background-position 0.3s ease; /* 悬停背景动画 */
}

.item-title:hover {
    color: #007bff;
    text-decoration: underline;
    background-position: left bottom; /* 悬停时背景向左移动，显示蓝色部分 */
}

/* 文章摘要区域 */
.item-abstract {
    background-color: transparent !important;
    border-left: 2px solid #e0e0e0; /* 摘要左侧边框 */
    padding: 6px 12px; /* 摘要内边距略微增大 */
    border-radius: 0 4px 4px 0;
    margin-bottom: 12px; /* 调整与底部的间距，略微增大 */
    font-size: 1.15em; /* 摘要字号：基于.rss-feed-container的18px，即 18 * 1.15 = 20.7px */
    line-height: 1.7; /* 增加行高，提升阅读舒适度 */
    color: #666;
    word-break: break-all;
    overflow: hidden;
}

.abstract-prefix {
    font-weight: bold;
    color: #007bff;
    margin-right: 6px; /* 略微增大与摘要文本的间距 */
    display: inline-block;
    flex-shrink: 0;
}

.item-abstract p {
    margin: 0;
    display: inline;
}

/* 底部信息区域：包含站点信息和元信息 */
.item-footer {
    display: flex;
    justify-content: space-between; /* 站点信息和元信息左右分散 */
    align-items: center;
    font-size: 1.05em; /* 底部信息整体字号：基于.rss-feed-container的18px，即 18 * 1.05 = 18.9px */
    color: #888;
    flex-wrap: nowrap; /* 默认不换行 */
}

.source-info { /* 站点名称和描述容器 */
    display: flex;
    align-items: center; /* 站点名称和描述在行内居中对齐 */
    flex-grow: 1; /* 占据更多空间 */
    min-width: 0; /* 允许内容缩小 */
    white-space: nowrap; /* 站点信息默认不换行 */
    overflow: hidden; /* 溢出隐藏 */
    text-overflow: ellipsis; /* 溢出显示省略号 */
}

.site-name {
    font-weight: 600; /* 站点名称粗一点 */
    color: #555;
    flex-shrink: 0; /* 站点名称不缩小 */
}

.site-info-separator { /* 站点信息分隔符 */
    margin: 0 8px; /* 间距略微增大 */
    color: #ccc;
    flex-shrink: 0;
}

.site-desc {
    font-size: 1em; /* 站点描述字号：基于.item-footer的1.05em，即 18.9 * 1 = 18.9px */
    color: #999;
    flex-grow: 1; /* 允许描述缩小 */
    overflow: hidden;
    text-overflow: ellipsis;
}

.meta-info { /* 发布日期和前往查看容器 */
    display: flex;
    align-items: center;
    flex-shrink: 0; /* 不缩小 */
    white-space: nowrap; /* 不换行 */
    margin-left: 20px; /* 与站点信息的间距略微增大 */
}

.meta-date {
    margin-right: 12px; /* 与“前往查看”的间距略微增大 */
    color: #999;
}

/* “前往查看”链接样式 */
.view-link {
    color: #007bff;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.2s ease-in-out, text-decoration 0.2s ease-in-out;
}

.view-link:hover {
    color: #0056b3;
    text-decoration: underline;
}

/* 无内容提示 */
.rss-feed-container p.no-content {
    text-align: center;
    color: #999;
    padding: 30px 0;
    font-size: 1.2em; /* 无内容提示字号：基于.rss-feed-container的18px，即 18 * 1.2 = 21.6px */
    font-style: italic;
    background-color: transparent !important;
    border-radius: 0;
    box-shadow: none;
    border: none;
}

/* 响应式调整 */
@media (max-width: 768px) {
    /* 基础字体大小在小屏幕上可以适当减小一点，但依然比之前大 */
    .rss-feed-container {
        font-size: 17px; 
    }
    .rss-item {
        padding: 15px 10px !important; /* 手机端左右内边距略小 */
    }
    .item-title {
        font-size: 1.25em; /* 手机端标题字号：基于17px，即 17 * 1.25 = 21.25px */
    }
    .item-abstract {
        font-size: 1.05em; /* 手机端摘要字号：基于17px，即 17 * 1.05 = 17.85px */
        padding: 5px 10px;
    }
    .item-footer {
        flex-direction: column; /* 手机端站点信息和元信息上下堆叠 */
        align-items: flex-start;
        font-size: 1em; /* 手机端底部信息字号：基于17px，即 17 * 1 = 17px */
    }
    .source-info {
        width: 100%; /* 占据一行 */
        margin-bottom: 6px; /* 与元信息的间距 */
    }
    .meta-info {
        width: 100%; /* 占据一行 */
        justify-content: space-between; /* 发布日期和前往查看左右分散 */
        margin-left: 0;
    }
}

@media (max-width: 480px) {
    /* 极致小屏幕再微调 */
    .rss-feed-container {
        font-size: 16px; /* 极致小屏幕基础字体再略微减小 */
    }
    .rss-item {
        padding: 12px 8px !important; /* 极致小屏下左右内边距再缩减 */
    }
    .item-title {
        font-size: 1.2em; /* 极致小屏标题字号：基于16px，即 16 * 1.2 = 19.2px */
    }
    .item-abstract {
        font-size: 1em; /* 极致小屏摘要字号：基于16px，即 16 * 1 = 16px */
        padding: 4px 8px;
    }
    .item-footer {
        font-size: 0.95em; /* 极致小屏底部信息字号：基于16px，即 16 * 0.95 = 15.2px */
    }
    .site-desc {
        font-size: 0.95em; /* 极致小屏幕下站点描述字体略小 */
    }
}




/**友链标识**/
.level.friend-link {
    background-color: #FFA300; /* 背景 */
    color: white; /* 白色文字 */
    border-radius: 2px;
    padding: 1px 3px;
    font-size: 0.68em;
    font-weight: bold;
    white-space: nowrap;
}

/* 友链容器 - 完全透明 */
.links-container {
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* 如果您希望单列，也可以设置为 1fr */
    gap: 0px 20px; 
    padding: 0 20px; 
    list-style: none;
    margin: 0;
    background-color: transparent; /* 完全透明 */
    box-shadow: none; /* 移除阴影 */
    border-radius: 8px; 
    overflow: hidden; 
    padding-top: 10px; 
    padding-bottom: 10px; 
}

/* 单个友链项 */
.link-item {
    background-color: transparent; /* 确保 link-item 本身就是透明的 */
    box-shadow: none; /* 确保 link-item 没有阴影 */
    border-radius: 0; 
    overflow: visible; 
    transition: background-color 0.2s ease-in-out; /* 保持背景色过渡，以便清除 */
    position: relative; 
}

/* 虚线分割线 */
.link-item:not(:last-child) { 
    border-bottom: 1px dashed #e0e0e0; 
    margin-bottom: 10px; 
    padding-bottom: 10px; 
}

/* 友链项悬停效果：背景完全透明，但确保动画能触发 */
.link-item:hover {
    background-color: transparent; /* 悬停时背景仍然完全透明 */
    transform: none; /* 保持不变，防止与 a:hover 冲突 */
}

.link-item a {
    display: flex; 
    align-items: center; 
    padding: 10px 0; 
    text-decoration: none;
    color: inherit;
    width: 100%; 
    justify-content: space-between; 
    position: relative; 
    /* 增加过渡效果，使交互更平滑 */
    transition: transform 0.2s ease-in-out; 
}

/* 友链项的悬停（点击）交互效果 */
.link-item a:hover {
    transform: translateX(5px); /* 悬停时向右平移一点 */
}

.link-item img {
    width: 40px; 
    height: 40px;
    border-radius: 8px; /* 友链头像圆角 */
    object-fit: cover;
    margin-right: 12px;
    flex-shrink: 0;
    /* 增加过渡效果，使头像变化更平滑 */
    transition: transform 0.2s ease-in-out; 
}

/* 头像的悬停（点击）交互效果 */
.link-item a:hover img {
    transform: scale(1.1); /* 鼠标悬停在整个链接区域时，头像轻微放大 */
}


.link-info {
    flex-grow: 1; 
    overflow: hidden;
    flex-shrink: 1; 
    min-width: 0; 
    display: flex; 
    flex-direction: column;
}

.link-info h3 {
    margin: 0;
    font-size: 1.0em; 
    font-weight: bold;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.link-info span {
    display: block;
    font-size: 0.8em; 
    color: #888; 
    margin-top: 3px;
    height: 1.2em;
    line-height: 1.2em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ***** 友链分类标签样式 - 关键优化部分 ***** */
.link-category {
    font-size: 0.75em; 
    color: #007bff; /* 蓝色字体 */
    background-color: #e6f2ff; /* 浅蓝色背景 */
    padding: 3px 8px;
    border-radius: 4px;
    margin-left: 10px; 
    white-space: nowrap; /* 强制不换行 */
    flex-shrink: 0; /* 防止被压缩 */
    align-self: center; /* 垂直居中 */
    display: block; /* 确保显示 */
    
    /* === 核心修改: 解决移动端标签显示不全的问题 === */
    max-width: 80px; /* 设置一个最大宽度，防止标签过长 */
    overflow: hidden; /* 隐藏超出最大宽度的文本 */
    text-overflow: ellipsis; /* 使用省略号来替代溢出的部分 */
}

/* ****** 新增友链申请要求和本站信息区域样式 ****** */
.friend-apply-section {
    padding: 20px;
    margin-top: 20px;
    /* 背景保持透明，可以根据需要设置一个轻微的背景色或边框 */
    /* background-color: #f8f8f8; */ 
    /* border: 1px solid #eee; */
    border-radius: 8px;
    box-shadow: none; /* 移除阴影，保持整体风格一致 */
}

.friend-apply-section h2 {
    font-size: 1.2em;
    color: #333;
    margin-top: 0;
    margin-bottom: 15px;
    border-bottom: 1px solid #eee; /* 添加底部分割线 */
    padding-bottom: 8px;
}

.friend-apply-section h3 { /* 提交格式的标题 */
    font-size: 1.1em;
    color: #333;
    margin-top: 25px;
    margin-bottom: 15px;
    border-bottom: 1px dashed #eee; /* 虚线分割 */
    padding-bottom: 5px;
}

.friend-apply-section p {
    font-size: 0.9em;
    color: #555;
    line-height: 1.6;
    margin-bottom: 10px;
}

.friend-apply-section ul,
.friend-apply-section ol {
    list-style-position: inside; /* 列表标记在文本内部 */
    padding-left: 0; /* 移除默认内边距 */
    margin-bottom: 15px;
}

.friend-apply-section ul li,
.friend-apply-section ol li {
    font-size: 0.9em;
    color: #666;
    line-height: 1.8;
    margin-bottom: 5px;
    padding-left: 1.2em; /* 为列表项添加左边距，以容纳列表标记 */
    text-indent: -1.2em; /* 负文本缩进，使列表标记在外部 */
}

/* 针对有序列表的特殊样式 */
.friend-apply-section ol li {
    list-style-type: decimal; /* 数字列表 */
}

/* 本站信息具体条目容器 */
.site-info-items {
    display: flex;
    flex-direction: column; /* 垂直排列 */
    gap: 8px; /* 条目间距 */
    margin-bottom: 20px;
}

.info-item {
    display: flex;
    justify-content: space-between; /* 标签和值两端对齐 */
    align-items: center;
    padding: 10px 15px;
    background-color: #fff; /* 信息卡片背景色 */
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* 轻微阴影 */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    cursor: pointer; /* 添加鼠标手型，提示可点击 */
}

.info-item:hover {
    transform: translateY(-2px); /* 悬停时轻微上移 */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 悬停时阴影加深 */
}

.info-label {
    font-size: 0.95em;
    color: #666;
    font-weight: bold;
    flex-shrink: 0; /* 不收缩 */
    margin-right: 15px;
}

.info-value {
    font-size: 0.95em;
    color: #333;
    text-align: right; /* 值右对齐 */
    flex-grow: 1; /* 占据剩余空间 */
    word-break: break-all; /* 网址过长时自动换行 */
    /* 移除链接样式，因为不再是<a>标签 */
    text-decoration: none; 
    transition: none; /* 移除过渡，因为不再是链接 */
}

.info-value.link-style { /* 保留这个类名，用于特定值的颜色 */
    color: #007bff; /* 蓝色文本 */
    text-decoration: none; /* 确保没有下划线 */
}

/* 提交格式代码块样式 */
.submit-format-code {
    background-color: #f0f0f0;
    border: 1px dashed #ddd; /* 虚线边框 */
    border-radius: 4px;
    padding: 10px;
    overflow-x: auto; /* 防止代码过长溢出 */
    font-size: 0.85em;
    line-height: 1.5;
    color: #333;
    white-space: pre-wrap; /* 允许代码块内文本换行 */
    word-break: break-all; /* 防止长单词溢出 */
    cursor: pointer; /* 添加鼠标手型，提示可点击 */
}

.submit-format-code:hover {
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 悬停时有轻微阴影 */
}

/* 联系信息 */
.contact-info {
    font-size: 0.85em;
    color: #888;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 15px;
}

.contact-methods {
    display: flex;
    justify-content: center;
    gap: 20px; /* 图标间距 */
    margin-bottom: 20px;
}

/* 联系方式图标通用样式 */
.contact-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #007bff; /* 默认蓝色 */
    transition: color 0.2s ease-in-out, transform 0.2s ease-in-out, background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    padding: 10px 15px; /* 增加内边距 */
    border-radius: 8px; /* 增加圆角 */
    background-color: transparent; /* 默认透明 */
    box-shadow: none;
}

.contact-icon i {
    font-size: 2em; /* 图标大小 */
    margin-bottom: 5px;
}

.contact-icon span {
    font-size: 0.8em;
    font-weight: bold; /* 文字加粗 */
}

.contact-icon:hover {
    color: #0056b3; /* 悬停颜色 */
    transform: translateY(-3px); /* 悬停时上移 */
}

/* ****** Telegram 按钮特定样式：与主题颜色搭配 ****** */
.telegram-contact {
    background-color: #007bff; /* 使用您友链分类标签的蓝色作为主色 */
    color: #ffffff; /* 白色文字和图标 */
    box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3); /* 蓝色阴影，透明度0.3 */
    border: 1px solid #007bff; /* 蓝色边框 */
    min-width: 100px; /* 最小宽度，确保按钮大小一致 */
}

.telegram-contact:hover {
    background-color: #0056b3; /* 悬停时稍微深一点的蓝色 */
    transform: translateY(-5px); /* 悬停时上移更多 */
    box-shadow: 0 6px 15px rgba(0, 123, 255, 0.4); /* 悬停时阴影更明显，透明度0.4 */
    color: #ffffff; /* 确保悬停时文字仍为白色 */
}

/* 移动端适配 */
@media (max-width: 768px) {
    .links-container {
        grid-template-columns: 1fr; /* 移动端单列 */
        padding: 10px 15px; 
        gap: 0; 
    }
    .link-item:not(:last-child) {
        margin-bottom: 10px;
        padding-bottom: 10px;
    }
    .link-category {
        font-size: 0.7em; 
        padding: 2px 6px;
        margin-left: 5px;
        max-width: 60px; /* === 关键修改：移动端标签宽度适配 === */
    }

    .friend-apply-section {
        padding: 15px;
        margin-top: 15px;
    }
    .friend-apply-section h2, .friend-apply-section h3 {
        font-size: 1.1em;
        margin-bottom: 10px;
    }
    .friend-apply-section p,
    .friend-apply-section ul li,
    .friend-apply-section ol li {
        font-size: 0.85em;
    }
    .info-item {
        padding: 8px 12px;
    }
    .info-label, .info-value {
        font-size: 0.9em;
    }
    .submit-format-code {
        padding: 8px;
        font-size: 0.75em;
    }
    .contact-methods {
        gap: 15px;
    }
    .contact-icon {
        padding: 8px 12px;
        min-width: 80px; /* 移动端按钮宽度调整 */
    }
    .contact-icon i {
        font-size: 1.8em;
    }
    .contact-icon span {
        font-size: 0.75em;
    }
}


/**用户cook协议**/
#cookie-notice {
    position: fixed;
    /* 修改 bottom 值，使其位于底部导航栏上方 */
    bottom: 78px; /* 假设你的底部导航栏高度为 50px */
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    text-align: center;
    padding: 15px 0;
    box-sizing: border-box;
    z-index: 9999;
    font-size: 14px;
    line-height: 1.5;
}

/* 其他样式保持不变 */
#cookie-notice a {
    color: #4CAF50;
    text-decoration: none;
    margin: 0 10px;
}

#cookie-notice a:hover {
    text-decoration: underline;
}

#cookie-notice button {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 8px 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin-left: 20px;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

#cookie-notice button:hover {
    background-color: #45a049;
}




/**文章点赞**/
.post-zan-container {
    display: flex;
    align-items: center;
    margin: 10px 0;
}


/* 文章内容部分 */
.post_content {
    line-height: 1.8; /* 提高行高，增强可读性 */
    font-size: 16px;
    color: #333; /* 文字颜色 */
}


/* 标签展示 */
.tags {
    margin-top: 15px;
    font-size: 14px;
    color: #555;
}


/* 返回顶部按钮 */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: #4caf50;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    display: none;
    cursor: pointer;
}

.back-to-top:hover {
    background-color: #388e3c;
}



/**首页美化**/
.swiper {
    width: 100%;
    height: 180px;
    margin-bottom: 10px;
}

.swiper-wrapper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
    font-size: 1.1em;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease;
}

.swiper-slide:hover {
    transform: scale(1.01);
}

.swiper-slide a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-slide h1 {
    margin: 0;
    padding: 10px;
    font-size: 1.1em;
}

.swiper-pagination {
    position: absolute;
    bottom: 5px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

.swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    opacity: 0.7;
    cursor: pointer;
}

.swiper-pagination-bullet-active {
    opacity: 1;
    background: #00796b;
}

/* 文章列表样式 */
.main {
    padding: 7px;
    margin-top: 10px;
}

.post {
    margin-bottom: 8px; /* 增加文章卡片之间间距，因为现在是透明虚线框 */
    border-radius: 5px;
    overflow: hidden;
    /* **核心修改：删除背景色和阴影，改为虚线边框** */
    /* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); */ /* 删除阴影 */
    background-color: transparent; /* 设置背景为透明 */
    border: 1px dashed #ccc; /* 添加虚线边框，颜色可调 */
    margin-top: 10px;
    position: relative; /* **新增：为绝对定位的子元素提供参考** */
}

.post:first-of-type {
    margin-top: 0;
}

.post a {
    display: block;
    text-decoration: none;
    color: inherit;
    padding: 10px;
}

.post .post_container {
    display: flex;
    /* **核心修改：图片与文章内容对齐，改为垂直居中** */
    /* align-items: center; 将图片和文本内容垂直居中对齐 */ /************* 这里是据中 ******************/
    gap: 4px; /* **方案二：从6px减小到4px，减少图片与内容间距** */
    padding: 10px; /* 增加卡片内边距，使内容不贴边 */
    padding-top: calc(10px + 0.5em); /* 调整这里，增加上半个字符的间距 */
    flex-direction: row;
    justify-content: space-between;
}

.post .post_content {
    flex-grow: 1;
    /* **新增/修改：增加垂直内边距，以平衡与图片的垂直对齐** */
    padding-top: 5px;
    padding-bottom: 5px;
}

/* 增大文章标题字体，使其更突出 */
.post .post_title_custom {
    font-size: 1.15em;
    margin: 0 0 8px 0; /* **修改：增加标题下边距，从5px改为8px** */
    font-weight: bold;
    color: #222;
    line-height: 1.3;
}

/* 文章摘要样式 */
.post .post_excerpt {
    font-size: 0.9em;
    color: #555;
    line-height: 1.5;
    /* **核心修改：摘要下边距，为元信息留出更小但足够的空间** */
    margin: 0 0 4px 0; /* **恢复：摘要下边距保持4px，不改变与元信息间距** */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.post .post_meta {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #777;
    font-size: 0.8em;
    flex-wrap: wrap;
    /* **核心修改：post_meta 的上边距，使其与摘要更紧密** */
    margin-top: 0px; /* 保持为 0，与上方摘要紧密衔接 */
    margin-bottom: 0px; /* 确保底部没有额外间距，如果外部有padding可以不设 */
}

/* 作者信息容器样式 */
.post .post_meta .author_info {
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

/* 作者头像样式 - 圆角正方形 */
.post .post_meta .author_avatar {
    width: 22px;
    height: 22px;
    border-radius: 4px; /* 圆角正方形 */
    vertical-align: middle;
    object-fit: cover;
}

.post .post_meta span {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-right: 10px;
    /* **核心修改：减小元信息行之间的下边距** */
    margin-bottom: 0px; /* 减少到 0px，使行更紧密 */
}

.post .post_container .post_img {
    width: 100px; /* 图片宽度保持不变 (方案二) */
    height: 70px; /* 保持高度不变 */
    border-radius: 5px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
    margin-left: 10px;
}

/* 分类页和标签页的缩略图样式 */
.page_thumb {
    position: relative;
    overflow: hidden;
    margin-bottom: 10px;
    color: #fff;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 120px;
}

.page_thumb.padding {
    padding: 15px;
}

.page_thumb:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0.5;
    z-index: -1;
}

.page_thumb h1 {
    font-size: 1.3em;
    margin: 0;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.page_thumb h1 span {
    display: block;
    font-size: 0.75em;
    margin-top: 3px;
    font-weight: normal;
}

.page_thumb .category-thumb {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: -2;
}

/* 加载动画样式 */
#loading-spinner {
    text-align: center;
    padding: 15px;
    color: #777;
}

.spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #ccc;
    border-top-color: #00796b;
    animation: spin 1s infinite linear;
    margin-right: 8px;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}


/*
 * 优化后的导航区域样式 - 包含 '新' 徽章
 *
 * 这是一个高级美工程序员的优化方案，旨在保持原有风格的同时，
 * 增加功能性和视觉效果，确保代码整洁、高效。
 */

.home-nav-links {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 2px 5px; /* 进一步减小上下内边距 */
    margin: 3px 10px; /* 进一步减小上下外边距 */
    background-color: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
    border: none;
    gap: 15px;
    overflow: hidden;
}

.home-nav-links .nav-item {
    flex-grow: 1;
    text-align: center;
    font-size: 1.1em; /* 稍微减小字体大小 */
    font-weight: 600;
    color: #666666;
    text-decoration: none;
    padding: 2px 2px; /* 进一步减小导航项内部填充 */
    position: relative; /* 关键：为 '新' 徽章提供定位上下文 */
    transition: all 0.25s ease-in-out;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    border-radius: 8px;
    font-family: inherit; /* 继承父元素的字体 */
}

/* '新' 徽章的样式 */
.nav-item-badge {
    position: absolute; /* 绝对定位 */
    top: -5px; /* 调整垂直位置，使其在右上角 */
    right: 5px; /* 调整水平位置 */
    background-color: #CE0F2D; /* 醒目的红色背景 */
    color: #FFFFFF; /* 白色字体 */
    font-size: 8px; /* 小巧的字体大小 */
    font-weight: bold;
    border-radius: 12%; /* 完美的圆形 */
    padding: 2px 2px; /* 确保内边距让其成为圆形 */
    line-height: 1; /* 确保文字垂直居中 */
    white-space: nowrap; /* 防止文字换行 */
    transform: scale(0.9); /* 稍微缩小，保持精致感 */
    display: inline-block;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); /* 增加立体感 */
    -webkit-font-smoothing: antialiased; /* 字体抗锯齿，使文字更清晰 */
}

.nav-item-badgee {
    position: absolute; /* 绝对定位 */
    top: -5px; /* 调整垂直位置，使其在右上角 */
    right: 5px; /* 调整水平位置 */
    background-color: #FF9912; /* 醒目的友链背景 */
    color: #FFFFFF; /* 白色字体 */
    font-size: 8px; /* 小巧的字体大小 */
    font-weight: bold;
    border-radius: 12%; /* 完美的圆形 */
    padding: 2px 2px; /* 确保内边距让其成为圆形 */
    line-height: 1; /* 确保文字垂直居中 */
    white-space: nowrap; /* 防止文字换行 */
    transform: scale(0.9); /* 稍微缩小，保持精致感 */
    display: inline-block;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); /* 增加立体感 */
    -webkit-font-smoothing: antialiased; /* 字体抗锯齿，使文字更清晰 */
}

.nav-item-badgeee {
    position: absolute; /* 绝对定位 */
    top: -5px; /* 调整垂直位置，使其在右上角 */
    right: 5px; /* 调整水平位置 */
    background-color: #477FFF; /* 醒目的蓝色背景 */
    color: #FFFFFF; /* 白色字体 */
    font-size: 8px; /* 小巧的字体大小 */
    font-weight: bold;
    border-radius: 12%; /* 完美的圆形 */
    padding: 2px 2px; /* 确保内边距让其成为圆形 */
    line-height: 1; /* 确保文字垂直居中 */
    white-space: nowrap; /* 防止文字换行 */
    transform: scale(0.9); /* 稍微缩小，保持精致感 */
    display: inline-block;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); /* 增加立体感 */
    -webkit-font-smoothing: antialiased; /* 字体抗锯齿，使文字更清晰 */
}

/* 点击（激活）时的样式，保持您原有的设计 */
.home-nav-links .nav-item:active {
    background-color: transparent;
    color: #FF8C00;
    transform: translateY(0);
    box-shadow: none;
}

/* 确保 :focus 状态没有背景色 */
.home-nav-links .nav-item:focus {
    outline: none;
    background-color: transparent;
}

/* 移除分隔线 */
.home-nav-links .nav-item:not(:last-child)::after {
    display: none;
}

/* 新增的小猫图片样式 */
.post-cat-corner {
    position: absolute;
    bottom: 1px; /* 距离底部5px */
    right: 5px; /* 距离右侧5px */
    width: 35px; /* 小猫图片的宽度 */
    height: 35px; /* 小猫图片的高度，保持宽高比 */
    overflow: hidden; /* 防止图片溢出容器 */
    display: flex; /* 使用flexbox居中图片，如果图片小于容器 */
    justify-content: center;
    align-items: center;
}

.post-cat-corner .cat-image {
    width: 100%; /* 图片宽度填充容器 */
    height: 100%; /* 图片高度填充容器 */
    object-fit: contain; /* 确保图片完整显示，不裁剪 */
    display: block; /* 移除图片默认的底部空白 */
}

/* 移动端优化 */
@media (max-width: 768px) {
    .main {
        padding: 8px;
    }

    .post .post_container {
        gap: 5px; /* **方案二：移动端间距从8px减小到5px** */
        /* **核心修改：移动端图片与文章内容对齐，改为垂直居中** */
        /* align-items: center; 移动端也垂直居中对齐 */
        padding: 0;
        /* padding-top: calc(8px + 0.5em); 移动端也调整这里 */
    }

    .post .post_content {
        flex-grow: 1;
        /* **新增/修改：移动端也增加垂直内边距** */
        padding-top: 0;
    }

    /* 移动端标题字体 */
    .post .post_title_custom {
        font-size: 1.05em;
        margin-bottom: 10px; /* **修改：移动端增加标题下边距，从4px改为6px** */
    }

    /* 移动端文章摘要样式 */
    .post .post_excerpt {
        font-size: 0.85em;
        line-height: 1.5;
        /* **核心修改：摘要下边距，为元信息留出更小但足够的空间** */
        margin-bottom: 0px; /* **恢复：移动端摘要下边距保持4px，不改变与元信息间距** */
    }

    /* 移动端作者信息 */
    .post .post_meta .author_info {
        gap: 4px;
    }

    /* 移动端作者头像样式 */
    .post .post_meta .author_avatar {
        width: 22px;
        height: 22px;
        border-radius: 3px;
    }

    .post .post_container .post_img {
        width: 100px; /* 移动端图片宽度保持不变 */
        height: 75px; /* 保持高度不变 */
        aspect-ratio: 16 / 9;
        margin-left: 8px;
        margin-bottom: 8px;
    }

    .post .post_meta {
        gap: 3px;
        font-size: 0.75em;
        /* **核心修改：移动端 post_meta 上边距，与摘要更紧密** */
        margin-top: 0px; /* 保持为 0 */
        margin-bottom: 0px; /* 确保底部没有额外间距 */
        padding: 0;
    }

    .post .post_meta span {
        margin-right: 4px;
        /* **核心修改：移动端元信息行之间的下边距** */
        margin-bottom: 0px; /* 减少到 0px */
    }

    .page_thumb {
        margin-bottom: 8px;
        min-height: 100px;
    }

    .page_thumb.padding {
        padding: 12px;
    }

    .page_thumb h1 {
        font-size: 1.2em;
    }

    .page_thumb h1 span {
        font-size: 0.7em;
        margin-top: 2px;
    }

    /* 移动端新增导航样式 */
    .home-nav-links {
        padding: 10px 5px;
        margin-top: 8px;
        margin-bottom: 8px;
    }

    .home-nav-links .nav-item {
        font-size: 0.9em;
        padding: 6px 0;
    }

    /* 移动端小猫图片样式调整 */
    .post-cat-corner {
        bottom: -5px; /* 移动端距离底部3px */
        right: 0px; /* 移动端距离右侧3px */
        width: 35px; /* 移动端小猫图片的宽度 */
        height: 35px; /* 移动端小猫图片的高度 */
    }
}


/* 微语测试提示语*/
.memos-tip {
    font-size: 13px;
    color: #999;
    margin-top: 1px;    /* 上边距 */
    margin-bottom: 1px; /* 下边距 */
    text-align: left;
}


/**微语用户认证美化**/
.user-info .name .verified-icon {
    margin-left: 3px; /* 设置昵称和图标之间的左边距 */
    /* font-size: 1.1em; /* 可选：调整图标大小，但对于SVG，最好使用width/height */ */
    vertical-align: middle; /* 可选：使图标垂直居中 */
}

.author-badge {
    width: 20px; /* 根据你的需要调整大小 */
    height: 20px; /* 保持宽高比例 */
    /* vertical-align: middle; /* 已经包含在 .verified-icon 中 */ */
    /* margin-left: 3px; /* 已经包含在 .verified-icon 中 */ */
    color: #FFD700; /* 示例：博主认证金色 */
}

.admin-badge {
    width: 14px; /* 根据你的需要调整大小 */
    height: 14px; /* 保持宽高比例 */
    /* vertical-align: middle; /* 已经包含在 .verified-icon 中 */ */
    /* margin-left: 4px; /* 已经包含在 .verified-icon 中 */ */
    color: #007bff; /* 示例：管理认证蓝色 */
}

.user-badge {
    width: 14px; /* 根据你的需要调整大小 */
    height: 14px; /* 保持宽高比例 */
    /* vertical-align: middle; /* 已经包含在 .verified-icon 中 */ */
    /* margin-left: 3px; /* 已经包含在 .verified-icon 中 */ */
    color: #6c757d; /* 示例：用户认证灰色 */
}

.contributor-badge {
    width: 14px; /* 根据你的需要调整大小 */
    height: 14px; /* 保持宽高比例 */
    /* vertical-align: middle; /* 已经包含在 .verified-icon 中 */ */
    /* margin-left: 3px; /* 已经包含在 .verified-icon 中 */ */
    color: #28a745; /* 示例：贡献认证绿色 */
}

.sponsor-badge {
    width: 16px; /* 根据你的需要调整大小 */
    height: 16px; /* 保持宽高比例 */
    /* vertical-align: middle; /* 已经包含在 .verified-icon 中 */ */
    /* margin-left: 3px; /* 已经包含在 .verified-icon 中 */ */
    color: #FF9902; /* 示例：赞赏认证颜色，这里使用了SVG中的橙色 */
}




/**弹框按钮特殊处理**/
.protect-eye .memos-form .button-submit,.protect-eye .oneblog-unsplash-loaded .layui-layer-btn a {
    background: #414141;
    color: var(--black-light);
}

.protect-eye .nodata img{
    filter: brightness(0.3);
}
/**移动端黑夜模式结束**/


/**全站通用**/
* {
    margin: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    width: 100%;
    padding: 0;
    -webkit-font-smoothing: antialiased;
}

/**————————全站通用HTML标签——————————————————————————————————————————————————————————————————————————————————————————**/

h1, h2, h3, h4 {
    letter-spacing: 2px;
    font-weight: 600;
    margin: 15px 0;
    line-height: 1.5;
    color: var(--black);
}

h1 {font-size: 24px;}

h2 {font-size: 20px;}

h3 {font-size: 18px;}

h4 {font-size: 16px;}

hr {
    margin: 20px 0;
    background: var(--line-grey);
    border: none;
    height: 1px;
}


/**全局输入框聚焦禁用默认样式**/
input {
    border: none;
    background: var(--bg-grey);
    color: var(--black-light);
}

input:focus {
    outline: none;
}

input:focus-within {
    border:none;
}

a {
    text-decoration: none;
    color: var(--black);
    position: relative;
    z-index: 99;
}

p {
    line-height: 1.8;
    word-break: break-all;
    font-weight: 400;
    letter-spacing: 2px;
    text-align: justify;
    margin-bottom: 2em;
    color: var(--black-light);
}


/**电子书下载按钮**/
.book-info .ebook-download a {
    display: inline-block;
    background: linear-gradient(to right, #ff6600, #ff8c00); /* 从橙色渐变到橙色 */
    color: #fff;
    padding: 6px 6px; /* 稍微调整内边距，让文字更舒适 */
    border-radius: 4px;
    text-decoration: none;
    font-size: 14px;
    margin-left: 0; /* 设置左外边距为 0，实现左对齐 */
    line-height: 1.2; /* 调整行高，使文字垂直居中 */
}

.book-info .ebook-download a:hover {
    background-color: rgba(0, 86, 179, 0.7); /* 鼠标悬停时的半透明深蓝色 */
}

.book-info > span {
    display: block; /* 让每个 span 元素独占一行，方便对齐 */
    margin-bottom: 5px; /* 可以添加一些下外边距，使行间距更舒适 */
}

.book-info .ebook-download {
    display: block; /* 让包含链接的 span 也独占一行 */
}

/**统计流量**/
.busuanzi-statistic {
  display: flex; /* 使用 Flexbox 布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  padding: 15px 0; /* 增加上下内边距 */
  gap: 30px; /* 设置每个统计项之间的间距 */
}

.busuanzi-statistic span {
  display: flex;
  align-items: center;
}

.busuanzi-statistic i {
  margin-right: 8px; /* 增加图标和文字之间的间距 */
  font-size: 1.2em; /* 调整图标大小 */
  color: #666; /* 设置图标颜色 */
}

.busuanzi-statistic em {
  font-style: normal; /* 去掉斜体 */
  font-weight: bold; /* 加粗数字 */
  color: #333; /* 设置数字颜色 */
  margin-left: 5px;
}

.busuanzi-statistic span:not(:last-child)::after {
  content: "|"; /* 添加垂直分隔符 */
  margin-left: 30px;
  color: #ccc;
}

.busuanzi-statistic {
  /* background-color: #f9f9f9; */
  /* border-top: 1px solid #eee; */
  /* border-bottom: 1px solid #eee; */
  padding: 15px 0; /* 确保内边距足够 */
}

.busuanzi-statistic span {
  font-size: 14px; /* 调整字体大小 */
  color: #777; /* 设置文字颜色 */
}


/**文章页面/独立页面内容区域a链接样式 排除图片灯箱效果**/
.post_content > p a:not(:has(img)):before {
    font-family: 'iconfont';
    content: '\e6c3';
}

.post_content > p a:not(:has(img)){
    position: relative;
    padding-left: 3px;
    text-decoration: none;
    color: var(--blue-light);
    transition: all 0.3s ease;
    padding-right: 3px;
    word-break: break-word;
}

.post_content > p a:not(:has(img)):hover {
    color: var(--blue);
}

/**删除线**/
del {
    font-weight: 100;
    text-decoration: line-through;
}

/**粗体**/
strong {
    font-weight: bold;
}

/**斜体**/
em {
    font-style: italic;
}

/**下划线**/
u {
    text-decoration: underline;
    text-underline-offset: 8px;
    text-decoration-color: var(--theme-color-light);
    text-decoration-thickness: 1px;
}

li {
    list-style: none;
}

/**有序列表**/
.post_content ol,.post_content ul {
    margin-bottom: 2em;
}

.post_content ol li {
    list-style: decimal;
    line-height: 1.8;
    letter-spacing: 1px;
    color: var(--black-light);
}

.post_content ol li::marker {
    color: var(--blue-light);
}

/**无序列表**/
.post_content ul li {
    list-style: disc;
    line-height: 1.8;
    letter-spacing: 1px;
    color: var(--black-light);
}

.post_content ul li::marker {
    color: var(--blue-light);
}

/**表格**/
table {
    margin-bottom: 2em; 
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    color: var(--black-light);
}

thead {
   background-color: var(--bg-grey);
}

th {
    font-weight: 600;
    text-align: left;
}

td,th {
    padding: 1rem;
    border: 1px solid var(--line-grey);
}

tbody tr:nth-child(even) {
  background-color: var(--bg-grey);
}

button {
    outline: none;
    border: none;
}

/**————————全站通用HTML标签 END ————————————————————————————————————————————————————————————————————————————————————————————————————**/





/**评论等级背景**/
.bg-1{
    background: var(--bg-grey);
    color: var(--grey);
}

.bg-2{
    background: var(--grey);
    color: var(--white);
}

.bg-3{
    background: var(--dark-grey);
    color: var(--white);
}

.owner {
    background: var(--theme-color);
    color: var(--white);
}

/**请求过程中禁止点击**/
.not-allowed {
    cursor: not-allowed !important; 
    opacity: 0.6; 
}

/* 官方账号等级标签 */
.level.vip-mini {
    display: inline-block; /* 内联块，方便设置大小 */
    background: linear-gradient(45deg, #6a0dad, #d4af37); /* 紫色到金色渐变 */
    color: #fff; /* 白色文字 */
    font-weight: 600; /* 加粗字体 */
    font-size: 0.65rem; /* 更小的字体尺寸 */
    padding: 1px 3px; /* 紧凑内边距 */
    border-radius: 10px; /* 圆角 */
    box-shadow: 0 0 5px rgba(212, 175, 55, 0.7); /* 金色阴影，柔和发光 */
    text-shadow: 0 0 2px rgba(0,0,0,0.2); /* 轻微文字阴影 */
    user-select: none; /* 禁止选中 */
    vertical-align: middle; /* 垂直居中 */
    transition: background 0.3s ease; /* 背景渐变过渡 */
}

/* 迷你版鼠标悬停效果 */
.level.vip-mini:hover {
    background: linear-gradient(45deg, #d4af37, #6a0dad); /* 渐变反转 */
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.9); /* 阴影加深 */
    cursor: default; /* 默认鼠标样式 */
}


/**移动端顶部导航+侧边栏菜单**/
.menu {
    position: fixed;
    left: -50%;
    width: 50%;
    height: 100%;
    z-index: 99999999;
    transition: width 0.5s;
    background: #383838;
    color: var(--white);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-wrap: nowrap;
}

.addWidth {
    width: 100%;  
    height: 100%;
}

.menu .close span{
    padding: 20px;
    display: block;
}


.menu li {
    margin: 15px 0;
    width: 50%;
}

.menu li a {
    padding: 10px 0;
    padding-bottom: 10px;
    color:var(--white);
    border-bottom: #777 1px solid;
}

.menu li a .iconfont {
    margin-right: 10px;
}

.copyright {
    position: absolute;
    bottom: 0;
    right: 0;
    height: 100px;
    padding: 5px 20px;
    box-sizing: border-box;
    width: 50%;
    overflow: hidden;
}

.copyright span, .copyright span a{
    font-size: 11px;
    color: var(--grey);
}

.copyright span {
    display: block;
    margin-bottom: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.copyright span:last-child {
    font-style: oblique;
}
/**滚动条视觉优化**/
::-webkit-scrollbar-track {
    background: var(--bg-grey);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb {
    background: var(--line-grey);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--grey);
}

/**侧栏和搜索展开后禁止滚动**/
/**遮罩效果**/
.no-scroll {
    -webkit-filter: blur(8px);
    -moz-filter: blur(8px);
    -ms-filter: blur(8px);
    filter: blur(8px);
    pointer-events:none; 
}
/**禁止滚动**/
.noscroll {
    overflow: hidden !important;
    width: 100%;
    touch-action: none;/**兼容IOS**/
}

/**顶部导航条**/
.header {
    padding: 15px 0;
    display: flex;
    text-align: center;
    -webkit-box-shadow: 0px 2px 6px 0px #00000029;
    box-shadow: 0px 2px 6px 0px #00000029;
    width: 100%;
    position: sticky;
    left: 0;
    top: 0;
    z-index: 999;
    transition: transform 0.3s ease-in-out;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: space-between;
    background: var(--bg-white);
}

.header.hide {
    box-shadow: none;
    transform: translateY(-100%);
}

.header i{
    font-size: 20px;
    padding: 0 30px;
    color: var(--black-light);
}

.logo {
    display: flex;
    height: 30px;
    width: 108px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

/**顶部搜索**/
.header.bottom-line {
    box-shadow: none;
    border-bottom: 1px solid var(--line-grey);
}

.search-layer {
    transition: transform 0.3s ease-in-out;
    position: fixed;
    width: 100%;
    z-index: 200;
    display: none;
}

.search {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    transition: transform 0.4s, -webkit-transform 0.4s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    padding: 20px 30px;
    width: 100%;
    background: var(--bg-white);
}

.search-active .search{
    transform: translateY(0);
}

.search-form {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-form input {
    flex: 1;
    height: 40px;
    border-radius: 5px 0 0 5px;
    font-size: 12px;
    padding: 5px 10px;
    letter-spacing: 1px;
}

.search-form button {
    padding: 0 10px;
    height: 40px;
    border-radius: 0 5px 5px 0;
    font-size: 12px;
    letter-spacing: 2px;
    background: var(--theme-color-light);
    color: var(--white);
}

/*首页banner文章轮播**/
.swiper-slide {
    position: relative;
}
.swiper-slide a {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    width: 100%;
    display: block;
    height: 200px;
}

.swiper-slide h1 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    bottom: 0;
    margin: 0;
    color: var(--white);
    text-shadow: 2px 1px 1px #000;
    font-size: 20px;
    padding: 25px 30px;
    position: absolute;
    left: 0;
    right: 0;
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    transition: all .2s ease;
    background-image: -webkit-linear-gradient(180deg, rgba(0, 0, 0, .01) 5%, rgba(0, 0, 0, .75) 100%);
    background-image: -moz-linear-gradient(180deg, rgba(0, 0, 0, .01) 5%, rgba(0, 0, 0, .75) 100%);
    background-image: linear-gradient(180deg, rgba(0, 0, 0, .01) 0, rgba(0, 0, 0, .65) 100%);
}

.swiper-pagination-bullet {
    background: #fff !important;
    opacity: var(--swiper-pagination-bullet-inactive-opacity, .3) !important;
}

.swiper-pagination-bullet-active {
    background: #fff !important;
    opacity: var(--swiper-pagination-bullet-inactive-opacity, .8) !important;
}

/**banner文章轮播指示器**/
.swiper-pagination {
    position: absolute;
    bottom: 10px;
    width: 100%;
    text-align: center;
}

.swiper-pagination-bullet {
    display: inline-block;
    width: 20px;
    height: 2px;
    background-color: #ccc;
    margin: 0 4px;
    cursor: pointer;
    border-radius: 2px;
    transition: background-color 0.3s ease;
}

.swiper-pagination-bullet-active {
    background-color: #000;
}


/**全站通用容器**/
.padding {
   padding: 0 10px 20px; 
}



/**数据加载中动画**/
#loading-spinner {
    justify-content: center;
    align-items: center;
    font-size: 14px;
    letter-spacing: 1px;
    margin: 20px 0;
    color: var(--grey);
}

.spinner {
    width: 22px;
    height: 22px;
    margin-right: 5px;
    border: 4px solid var(--line-grey);
    border-top: 4px solid var(--grey);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/**全部数据加载完毕**/
.end {
    color: var(--line-grey);
    text-align: center;
    font-size: 16px;
    padding: 15px 0;
}


/* 移动端图片懒加载样式 */
.lazy-load {
    background-image: url(../img/body.jpg); /* 默认背景图 */
    -webkit-transition: .5s ease-in-out opacity;
    transition: .5s ease-in-out opacity;
    filter: blur(35px);
    -webkit-mask: radial-gradient(circle at center, white 100%, transparent 100%);
    mask: radial-gradient(circle at center, white 100%, transparent 100%);
}

.loaded {
    filter: blur(0px);
    opacity: 1;
    transition: .5s filter linear, .5s -webkit-filter linear;
}

/***懒加载结束**/

/**搜索结果页**/
.search-result {
    padding: 30px 0 10px;
    margin: 0 30px;
    border-bottom: 1px solid var(--line-grey);
    font-size: 12px;
    letter-spacing: 1px;
}

.search-result span {
    display: flex;
    align-items: center;
    color: var(--black-light);
}

.search-result i {
    font-size: 18px;
    margin-right: 2px;
}

/**搜索无结果 + 404页面**/
.nodata {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    padding: 40px 30px;
    overflow: hidden;
    text-align: center;
}

.nodata img {
    width: 200px;
    opacity: 0.8;
}

.nodata span {
    letter-spacing: 2px;
    padding: 20px 0;
    font-size: 14px;
    color: var(--grey);
}

.nodata a {
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 3px;
    margin-top: 10px;
    letter-spacing: 2px;
    background: var(--theme-color);
    color: var(--white);
}

/**文章详情页**/
/**有封面图的文章详情页**/
/* ============================================== */
/* 全局变量及基础重置 (保持与主题协调)     */
/* ============================================== */
:root {
    --accent-color: #66BB6A; /* 主色调，绿色系 */
    --text-color-primary: #333; /* 主要文本颜色 */
    --text-color-secondary: #666; /* 次要文本颜色 */
    --bg-light: #f7f9fa; /* 页面背景色 */
    --border-light: #eceff1; /* 边框或分隔线颜色 */
    --dashed-border-color: #ccc; /* 虚线边框颜色 */
    --card-radius-large: 10px; /* 大圆角 (例如封面图顶部) */
    --card-radius-small: 0; /* 小圆角或无圆角 (例如封面图底部，内容顶部) */
    --content-padding-horizontal: 30px; /* 文章内容左右内边距 */
    --global-margin-horizontal: 15px; /* 主内容区域整体左右外边距 */
    --top-safe-area-padding: 20px; /* **优化：顶部安全区域间距** */
}

body {
    background-color: var(--bg-light); /* 设置整体页面背景色 */
}

/* ============================================== */
/* 文章详情页主容器 */
/* **优化：统一控制整体顶部间距** */
.main.article-detail-main {
    max-width: 800px; /* 控制内容最大宽度 */
    margin: 0 auto 20px; /* 居中显示，底部边距，顶部边距由padding-top控制 */
    padding: var(--top-safe-area-padding) var(--global-margin-horizontal) 0; /* **优化：顶部增加padding，实现与边缘间距** */
}

/* ============================================== */
/* 1. 有封面图的文章详情页结构 */
/* ============================================== */
.article-detail-main .post_thumb {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 250px;
    position: relative;
    width: calc(100% - (var(--global-margin-horizontal) * 2)); /* 宽度减去主容器的左右边距 */
    margin: 0 auto 0; /* **优化：确保自身没有额外的顶部和左右边距，由父级和自身width/padding控制** */
    object-fit: cover;
    border-top-left-radius: var(--card-radius-large); /* 顶部左圆角 */
    border-top-right-radius: var(--card-radius-large); /* 顶部右圆角 */
    border-bottom-left-radius: var(--card-radius-small); /* 底部左无圆角 */
    border-bottom-right-radius: var(--card-radius-small); /* 底部右无圆角 */
    overflow: hidden; /* 确保背景图在圆角内 */
    background-color: #fff; /* 给封面图区域也加上白色背景，确保圆角背景一致 */
}

.article-detail-main .oneblog-date {
    display: none; /* 保持隐藏日期 */
}

/* 分类样式：紧跟封面图下方 */
.article-detail-main .category {
    text-align: center;
    margin-top: 0; /* 分类紧跟封面图，移除顶部间距 */
    margin-bottom: 15px; /* 与标题的间距 */
    background: #EDD900; /* 恢复原来的分类背景色 */
    display: inline-block; /* 确保背景色和圆角生效 */
    padding: 5px 15px;
    color: FFEBB7 !important; /* **优化：强制分类字体白色，解决优先级问题** */
    font-size: 13px;
    border-radius: 0 0 10px 10px; /* 底部圆角 */
    text-decoration: none;
    position: relative; /* 确保定位上下文 */
    left: 50%;
    transform: translateX(-50%); /* 居中 */
}

.article-detail-main .post_info {
    text-align: center;
    margin-bottom: 20px;
    padding: 0 var(--content-padding-horizontal); /* 为标题和元信息添加左右内边距 */
    background-color: #fff; /* **新增：有图页标题元信息区域背景** */
    border-radius: 0 0 var(--card-radius-large) var(--card-radius-large); /* **新增：底部圆角，与下方虚线内容区衔接** */
    margin-top: -10px; /* 微调，让分类和标题区域更紧凑衔接 */
    position: relative;
    z-index: 2; /* 确保在分类和内容之上 */
}

.article-detail-main .post_info h1 {
    margin: 0 0 10px; /* 调整标题上下间距 */
    font-size: 24px;
    letter-spacing: 2px;
    line-height: 1.5;
    color: var(--text-color-primary);
}

/* ============================================== */
/* 2. 无图文章详情页头部 */
/* ============================================== */
.article-detail-main .post_nothumb {
    padding: 20px var(--content-padding-horizontal) 0; /* 内边距 */
    background-color: #fff; /* **优化：无图页头部背景色** */
    box-shadow: none; /* 移除阴影 */
    margin-bottom: 20px; /* 底部间距 */
    border-radius: var(--card-radius-large) var(--card-radius-large) 0 0; /* **优化：无图页顶部也加上圆角** */
    overflow: hidden; /* 确保内容在圆角内 */
}

.article-detail-main .post_nothumb .breadcrumb {
    color: var(--text-color-secondary);
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    font-size: 12px;
    letter-spacing: 1px;
    justify-content: flex-start; /* 左对齐 */
    margin-bottom: 10px; /* 调整面包屑与标题间距 */
}

.article-detail-main .post_nothumb .breadcrumb a {
    color: var(--text-color-secondary);
    text-decoration: none;
}

.article-detail-main .post_nothumb .breadcrumb span {
    margin: 0 5px;
}

.article-detail-main .post_nothumb h1 {
    margin: 0 0 5px; /* 调整标题上下间距 */
    font-size: 24px;
    color: var(--text-color-primary);
    text-align: center; /* 无图详情页标题居中 */
}

/* ============================================== */
/* 通用文章元信息样式 (有图和无图页面共用) */
/* ============================================== */
.article-detail-main .post_meta_optimized {
    font-size: 0.85em;
    color: var(--text-color-secondary);
    display: flex;
    flex-wrap: nowrap; /* 强制不换行 */
    justify-content: center; /* 居中对齐 */
    align-items: center;
    margin-top: 5px; /* 与标题的间距 */
    padding-bottom: 10px; /* 与下方内容的间距 */
    border-bottom: 1px solid var(--border-light); /* 关键：发布时间下的分割线 */
}

.article-detail-main .post_meta_optimized span {
    white-space: nowrap; /* 强制不换行 */
    padding: 0 8px; /* 调整内边距，减少总宽度 */
    border-right: 1px solid var(--border-light); /* **优化：使用竖线分隔符** */
}

.article-detail-main .post_meta_optimized span:first-child {
    padding-left: 0;
}

.article-detail-main .post_meta_optimized span:last-child {
    border-right: none; /* **优化：最后一个不显示分隔线** */
    padding-right: 0;
}

/* ============================================== */
/* 新的虚线包裹区域 - 从元信息分割线下方开始 */
/* ============================================== */
.article-detail-main .post_content {
    background-color: #fff; /* 背景色 */
    padding: 20px var(--content-padding-horizontal); /* 内边距 */
    line-height: 1.8;
    font-size: 15px;
    color: var(--text-color-primary);
    border: 1px dashed var(--dashed-border-color); /* 虚线边框 */
    border-top: none; /* 关键：顶部无虚线，实现“剪断”效果 */
    border-radius: 0 0 var(--card-radius-large) var(--card-radius-large); /* 底部圆角 */
    margin-bottom: 20px; /* 与评论区保持距离 */
    position: relative;
    z-index: 1; /* 确保边框在下方元素之上 */
    top: -1px; /* 微调以覆盖上一个元素的边框缝隙 */
}

/* 调整有图页的元信息下面的分隔线与文章内容区的距离 */
.article-detail-main .post_info + .post_content {
    margin-top: 0; /* 确保无额外顶部间距 */
}
/* 调整无图页的元信息下面的分隔线与文章内容区的距离 */
.article-detail-main .post_nothumb .post_meta_optimized + .post_content {
     margin-top: 0; /* 确保无额外顶部间距 */
}


/* ============================================== */
/* 其他通用区块样式 */
/* ============================================== */
.article-detail-main .poster-image {
    text-align: center;
    margin: 30px 0;
}
.article-detail-main .poster-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px; /* 图片自身可以有圆角 */
}

.article-detail-main .cc-say {
    padding: 10px 20px;
    font-size: 12px;
    letter-spacing: 1px;
    line-height: 2;
    text-align: justify;
    background: var(--bg-light);
    color: var(--text-color-secondary);
    border-radius: 8px;
    border: 1px solid var(--border-light);
    margin-bottom: 25px;
}

.article-detail-main .tags {
    max-width: 100%;
    font-size: 11px;
    margin-top: 2em;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.article-detail-main .tags a {
    text-decoration: none;
    background: var(--bg-light);
    color: var(--text-color-secondary);
    padding: 5px 10px;
    border-radius: 2px;
    margin: 0 8px 8px 0;
    word-break: keep-all;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.article-detail-main .tags a:hover {
    background: var(--accent-color);
    color: #fff;
}

.article-detail-main .divider {
    border-bottom: 1px dashed var(--dashed-border-color);
    margin: 40px 0;
}

.article-detail-main .post-declaration {
    font-size: 0.85em;
    color: var(--text-color-secondary);
    margin: 10px 0;
    padding: 5px 12px;
    background-color: var(--bg-light);
    border-radius: 8px;
    border: 1px solid var(--border-light);
    line-height: 1.5;
    text-align: left;
}
.article-detail-main .post-declaration p {
    margin-bottom: 2px;
}
.article-detail-main .post-declaration p:last-child {
    margin-bottom: 0;
}
.article-detail-main .post-declaration a {
    color: var(--accent-color);
    text-decoration: none;
    word-break: break-all;
}



/**评论列表**/
.respond {
    padding-bottom: 20px;
}

.line {
    height: 1px;
    background: var(--line-grey);
    margin-bottom: 10px;
}

/**评论回复**/
li .respond {
    margin-left: 50px;
    margin-bottom: 20px;
}

.comment-list {
    padding: 0;
}

.user {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.user .avatar {
    width: 40px;
    height: 40px;
    margin-right: 10px;
    border: 1px solid var(--line-grey);
    padding: 2px;
    border-radius: 7px;
}

.user-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.user .name {
    font-size: 14px;
    font-weight: bold;
    display: flex;
    margin-bottom: 3px;
    align-items: center;
    color: var(--black-light);
}

/**评论等级样式**/
.level {
    padding: 1px 3px;
    background-color: #eee8aa;
    border-radius: 2px;
    font-size: 10px;
}

.level.owner {
    background-color: #ff8033;
    color: #fff;
}

.level.ownerr {
    background-color: #e74c3c;
    color: #FA0404;
}

.level.special {
    padding: 1px 3px;
    background-color: #800000; /* 栗色色背景 */
    color: #fff; /* 白色文字 */
    border-radius: 2px;
    font-size: 10px;
}

/**视觉默认隐藏回复按钮**/
.user .date {
    font-size: 12px;
    font-weight: 100;
    color: var(--grey);
}

.comment-list li {
    padding: 20px 0;
    -webkit-animation-fill-mode: initial;
    animation-fill-mode: initial;
    border-bottom: 1px solid var(--line-grey);
}

.comment-list li:last-child {
    border-bottom: none;
}

.comment-list p {
    margin-left: 50px;
    font-size: 14px;
    margin-bottom: 0;
}

/**表情图片适配**/
.comment-list p img{
    vertical-align: top;
    width: 26px;
    height: 26px;
}

/**子级评论列表**/
li.comment-child {
    margin-left: 50px;
    padding: 15px 10px 10px;
    border-bottom: var(--line-grey) 1px solid;
    background: var(--bg-grey);
}

li.comment-child:first-child {
    margin-top:15px;
    border-top-left-radius: 5px !important;
    border-top-right-radius: 5px !important;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

li.comment-child:last-child {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 5px !important;
    border-bottom-right-radius: 5px !important;
    padding-bottom: 20px;
}

.commentLike {
    margin-left: 50px;
    font-size: 14px;
    margin-top: 10px;
}

.commentLike i {
    font-size: 20px;
    margin-right: 5px;
    color: var(--red);
}

.commentLike a {
    display: flex;
    align-items: center;
    width: fit-content;
}

/**自动加载更多评论**/

/*评论列表隐藏分页显示*/
#comments .page-navigator {
     display: none;
 }
 
#no-more {
    letter-spacing: 2px;
    line-height: 2; 
}
/**评论列表结束**/


/**归档页面**/
.page_thumb {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 200px;
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-end;
    overflow: hidden;
    margin-bottom: 20px;
}

.page_thumb h1 {
    color: var(--white);
    margin: 0;
    font-size: 22px;
    letter-spacing: 2px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    text-shadow: 1px 1px 1px #000;
    z-index: 1;
}

.page_thumb h1 span {
    font-size: 14px;
    font-weight: 500;
    margin-top: 5px;
}

.archives h3{
    font-size: 18px;
    margin: 20px 0;
    letter-spacing: 1px;
    padding-top: 20px;
    color: var(--black-light);
}

.archives h3 span {
    margin-right: 3px;
    color: var(--theme-color-light);
}

.archives li {
    font-size: 14px;
    margin: 10px 18px;
    letter-spacing: 1px;
    padding-bottom: 5px;
    border-bottom: 1px var(--line-grey) solid;
}

.archives li a {
    display: flex;
    line-height: 1.5;
}

.archives li span {
    font-weight: 100;
    min-width: 70px;
    margin-right: 5px;
}

.archives .tags{
    margin: 10px 22px;
}


/**书单列表**/
#books {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px; 
    margin: -20px auto 0;
    padding: 10px;
}

.book {
    flex-basis: calc(25% - 8px); 
    box-sizing: border-box; 
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none; 
    color: inherit;
    z-index: 1;
}

.book-thumb {
    width: 100%;
    padding-top: 140%;
    background-size: cover;
    background-position: center;
    border-radius: 5px; /* 设置四个角的圆角 */
}

.book-name {
    text-align: center;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    max-width: 80px;
    margin: 10px auto 0;
    padding: 0 2px;
    color: var(--black-light);
}



/** 书单详情页 **/
.book-bg {
    position: relative;
    padding: 30px;
    display: flex;
    align-items: center;
    flex-direction: row;
}

.book-bg:before {
    position: absolute;
    content: '';
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    filter: blur(20px);
    -webkit-filter: blur(20px);
    backdrop-filter: blur(20px);
    background: rgba(255, 255, 255, 0.3); /* 设置为半透明白色 */
    background-size: cover;
}

.book-bg .book-thumb {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* 增强阴影效果 */
    margin-right: 1em;
    position: relative;
    padding: 60px 0px 20px 30px;
    width: 93px;
    height: 132px;
    background-repeat: no-repeat;
}

.book-info {
    letter-spacing: 2px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
    max-width: 200px;
    color: var(--white);
}

.book-info h2 {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* 增强阴影效果 */
    font-size: 20px; /* 增大字体 */
    margin: 0;
    color: var(--white);
}

.book-info span {
    font-size: 16px; /* 增大字体 */
    margin-top: 5px; /* 减少上边距 */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* 增强阴影效果 */
}

/** 书籍详情页选项卡切换 **/
.bookinfo {
    /** 初始隐藏书籍简介，避免屏幕闪烁 **/
    display: none;
}

.bookinfo .about {
    font-size: 14px;
    padding: 30px;
}

.bookinfo p:last-child {
    margin-bottom: 0;
}

.book-tab {
    padding: 10px 30px;
    clear: both;
}

.tab-item {
    display: flex;
}

.tab-item a {
    padding: 8px 15px;
    font-size: 14px;
    margin-right: 10px;
    text-decoration: none; /* 去掉链接下划线 */
    color: var(--dark-grey); /* 默认文本颜色 */
    transition: background 0.3s, color 0.3s; /* 添加过渡效果 */
}

.tab-item a:hover {
    background: rgba(0, 0, 0, 0.1); /* 鼠标悬停时的背景 */
    color: var(--primary-color); /* 鼠标悬停时的文本颜色 */
}

.tab-item .selected {
    border: var(--line-grey) 1px solid;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* 增强阴影效果 */
    border-radius: 100px;
    background: var(--light-grey); /* 选中项的背景颜色 */
    color: var(--primary-color); /* 选中项的文本颜色 */
}

/**读书笔记输入框间距调整**/
.booknote .respond{
    margin: 30px 0;
}

/**读书笔记列表**/
.booknote li {
    padding: 25px 20px;
    margin: 40px auto 40px auto;
    max-width: 90%;
    position: relative;
    background: transparent;
    border: none;
    border-radius: 4px;
    transform: none;
    box-shadow: none;

    /* 添加顶部和左右边框的虚线 */
    border-top: 1px dashed var(--note-border-color, #cccccc);
    border-left: 1px dashed var(--note-border-color, #cccccc);
    border-right: 1px dashed var(--note-border-color, #cccccc);
}

/* 关键修正点：使用 :after 伪元素创建海浪般的波浪线底部边框 */
.booknote li:after {
    content: "";
    position: absolute;
    bottom: -1px; 
    left: 0;
    width: 100%;
    height: 8px; /* 增加伪元素的高度，留出更多空间给波浪线 */
    
    /* * 优化后的 SVG 代码：
     * 1. 移除了 stroke-width，使用默认的 1px 粗细。
     * 2. 使用 'C' 指令（三次贝塞尔曲线）来创建更平滑、更复杂的海浪形状。
     */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0,5 C25,10 25,0 50,5 C75,10 75,0 100,5 Z' stroke='%23cccccc' fill='none' /%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: 100% 100%;
}


/* 确保最后一个元素的底部间距也正常 */
.booknote li:last-child {
    margin-bottom: 40px; 
}

.booknote p {
    margin: 0;
    line-height: 1.6;
    word-break: break-all;
    text-align: justify;
    font-size: 14px;
    color: var(--note-text-color, #444444);
    background: transparent;
    padding-bottom: 5px;
}

.booknote li span {
    display: block;
    text-align: right;
    font-size: 11px;
    color: var(--note-date-color, #888888);
    margin-top: 10px;
}

/* 移除之前的所有伪类和 hover 效果，保持样式统一 */
.booknote li:nth-child(2n+1),
.booknote li:nth-child(2n),
.booknote li:nth-child(3n) {
    background: transparent;
    transform: none;
}
.booknote li:hover {
    transform: none;
    box-shadow: none;
    z-index: auto;
}
/**书单全部结束**/

/**微语页面**/
/**微语页面**/
.memos-btn {
    z-index: 1;
}

.memos-btn button,.updateBtn{
    padding: 5px 16px;
    border-radius: 50px;
    font-size: 14px;
    cursor: pointer;
    background: #333333;
    color: #ffffff;
    z-index: 1;
}

/**登录弹框样式开始**/

.layui-memos {
    max-width: 420px;
    border-width: 1px;
    border-radius: 10px !important;
    -webkit-background-clip: unset !important;
}

.layui-memos .layui-layer-setwin{
    right: 20px;
    top: 20px;
}

.layui-memos .layui-layer-title {
    font-weight: 600;
    color: rgba(107, 114, 128, 1);
    border-bottom: none;
    font-size: 14px;
    height: auto;
}
  
.memos-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: var(--bg-white);
    padding: 20px 25px;
    border-radius: 10px;
}

.memos-form h3{
    margin: 0 0 5px;
    font-size: 16px;
    letter-spacing: 2px;
}


.memos-form .flex-column > label {
    font-weight: 600;
    margin-bottom: 5px;
    font-size: 14px;
    display: block;
    color: var(--black-light);
}

.memos-form .inputForm {
    border-radius: 5px;
    height: 40px;
    display: flex;
    align-items: center;
    padding-left: 10px;
    padding-right: 10px;
    transition: 0.2s ease-in-out;
    margin-bottom: 10px;
    background: var(--bg-grey);
    color: var(--black-light);
}

.memos-form .input {
    margin-left: 10px;
    border-radius: 5px;
    width: 85%;
    height: 30px;
}

.memos-form textarea {
    height: 130px;
}
/* 覆盖所有自动填充及焦点状态 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0px 1000px var(--bg-grey) inset;
    box-shadow: 0 0 0px 1000px var(--bg-grey) inset;
    -webkit-text-fill-color: var(--grey);
}

#toggle-password {
    cursor: pointer;
    color: var(--grey);
}

.memos-form .button-submit {
    margin: 10px 0;
    border: none;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 2px;
    border-radius: 5px;
    height: 40px;
    cursor: pointer;
    background: var(--black-light);
    color: var(--bg-white);
}
/**登录弹框结束**/

/**微语列表**/
.memos {
    padding: 0 10px 20px;
}

/**微语页面结束**/

/**友情链接页面**/
.links {
    padding: 20px;
    margin-top: -20px;
}

.links li {
    overflow: hidden;
    box-sizing: border-box;
    padding: 10px 0;
    border-bottom: 1px solid var(--line-grey);
}

.link a {
    max-width: 330px;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: flex-start;
}

.link a img {
    -o-object-fit: cover;
    object-fit: cover;
    vertical-align: middle;
    width: 60px;
    height: 60px;
    border-radius: 50px;
    padding: 5px;
    margin: 10px;
    box-sizing: border-box;
    border: 5px solid var(--bg-grey);
}

.link-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: nowrap;
}

.link-info h3 {
    margin: 0 0 5px 0;
    font-size: 15px;
    font-weight: 600;
}

.link-info span {
    font-size: 14px;
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis;
    max-width: 250px;
    color: var(--dark-grey);
}

/**相册页面**/
#photos {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: -19px;
}

.photo {
    flex-basis: 33.33%;
    position: relative;
    padding-top: 33.33%;
}

.photo a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid var(--bg-white);
}

.photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    margin: 0;
    border-radius: 0;
}

/**同步照片按钮**/
.updateBtn i {
    margin-right: 4px;
}


/**同步照片加载动画**/
.Syncing {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px 30px;
}

.Syncing span {
    margin-top: 10px; 
    margin-bottom: 0; 
    color: #fff;
}

/**作品同步中转圈动画**/
.loader {
  width: 50px;
  display: grid;
  aspect-ratio: 1;
  border-radius: 50%;
  -webkit-mask: radial-gradient(50% 50%, #0000 calc(99% - 10px), #000 calc(101% - 10px));
  animation: r 4s linear infinite;
  margin: 0 auto;
}

.loader:before {
  content: "";
  background: conic-gradient(from 25deg, #f8a201 25%, #fa2402 0 50%, #fdb3b0 0 75%, #02dde1 0);
  -webkit-mask: repeating-conic-gradient(#0000 0 25deg, #000 23% 25%), radial-gradient(5px at 5px 50%, #000 97%, #0000) left/calc(100% - 2 * 5px) 100% repeat-x, radial-gradient(5px at 50% 5px, #000 97%, #0000) top /100% calc(100% - 10px) repeat-y;
}

@keyframes r {
  to {
    transform: rotate(360deg);
  }
}

/**同步照片弹框皮肤**/
.oneblog-unsplash-loading {
    max-width: 320px;
    height: 140px;
    border-width: 1px;
    border-color: rgb(0 0 0);
    border-radius: 1rem !important;
    background-color: rgb(0 0 0 / 76%) !important;
    padding: 1rem !important;
    -webkit-background-clip: unset !important;
}

/**同步完成的弹框皮肤**/
.oneblog-unsplash-loaded {
    max-width: 320px;
    border-width: 1px;
    border-color: rgba(219, 234, 254, 1);
    border-radius: 1rem !important;
    background-color: var(--bg-white) !important;
    padding: 1rem !important;
    -webkit-background-clip: unset !important;
}

.oneblog-unsplash-loaded .layui-layer-setwin{
    right: 20px;
    top: 20px;
}

.oneblog-unsplash-loaded .layui-layer-title {
    font-weight: 600;
    color: var(--black-light);
    background-color: var(--bg-white);
    border-bottom: none;
    font-size: 16px;
    height: auto;
}

.oneblog-unsplash-loaded .layui-layer-content{
    height: auto !important;
    max-height: 450px;
    color: var(--black-light);
}

.oneblog-unsplash-loaded .layui-layer-btn {
    text-align: center;  
}

.oneblog-unsplash-loaded .layui-layer-btn a {
    text-decoration: none;
    display: block;  
    border-radius: 0.5rem;
    width: 100%;  
    padding: 0.75rem 1.25rem;
    text-align: center;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    background-color: rgba(59, 130, 246, 1);
    color: rgba(255, 255, 255, 1);
    height: auto;
    margin: 0 auto;  
    border: none;
    box-sizing: border-box; 
}

/**相册列表结束**/

/**相册详情页+正文通用图片**/
.post_content img {
    height: auto;
    border-radius: 3px;
    text-align: center;
    max-width: 100%;
    max-height: 500px;
    display: block;
    margin: 20px auto;
}

/**代码格式化**/
pre {
    overflow-x: auto;
    margin: 20px 0;
}

pre code{
    display:block;
    overflow-x:auto;
    padding:1em;
    filter: blur(5px);
    transition: filter 0.4s ease;
    color: #ffffff;
    border-radius: 2px;
    letter-spacing: 0;
    line-height: 1.5;
}

/* Webkit 浏览器（Chrome、Safari、Edge）的滚动条样式 */
pre code::-webkit-scrollbar {
    height: 10px; /* 滚动条高度 */
}

pre code::-webkit-scrollbar-track {
    background: #2d2d2d; /* 滚动条轨道背景 */
    border-radius: 5px;
}

pre code::-webkit-scrollbar-thumb {
    background: #888; /* 滚动条滑块颜色 */
    border-radius: 5px;
    border: 2px solid #2d2d2d; /* 滑块边框 */
}

pre code::-webkit-scrollbar-thumb:hover {
    background: #aaa; /* 鼠标悬停时滑块颜色 */
}

/**高亮后的样式**/

pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{background:#23241f;color:#f8f8f2}.hljs-subst,.hljs-tag{color:#f8f8f2}.hljs-emphasis,.hljs-strong{color:#a8a8a2}.hljs-bullet,.hljs-link,.hljs-literal,.hljs-number,.hljs-quote,.hljs-regexp{color:#ae81ff}.hljs-code,.hljs-section,.hljs-selector-class,.hljs-title{color:#a6e22e}.hljs-strong{font-weight:700}.hljs-emphasis{font-style:italic}.hljs-attr,.hljs-keyword,.hljs-name,.hljs-selector-tag{color:#f92672}.hljs-attribute,.hljs-symbol{color:#66d9ef}.hljs-class .hljs-title,.hljs-params,.hljs-title.class_{color:#f8f8f2}.hljs-addition,.hljs-built_in,.hljs-selector-attr,.hljs-selector-id,.hljs-selector-pseudo,.hljs-string,.hljs-template-variable,.hljs-type,.hljs-variable{color:#e6db74}.hljs-comment,.hljs-deletion,.hljs-meta{color:#75715e}

/**主题版权信息**/
.copyright-info {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color: red;
    text-align: center;
    z-index: 9999;
}

/**分类详情页**/
.page_thumb.oneblog:before {
    position: absolute;
    content: '';
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    filter: blur(50px);
    -webkit-filter: blur(50px);
    -moz-filter: blur(50px);
    -ms-filter: blur(50px);
    -o-filter: blur(50px);
    -webkit-backdrop-filter: blur(50px);
    backdrop-filter: blur(50px);
}


.page_thumb.oneblog {
    justify-content: flex-start;
}

.page_thumb.oneblog h1 {
    height: 60px;
    max-width: 200px;
}

.page_thumb.oneblog h1 span {
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis;
}

.category-thumb {
    box-shadow: 1px 1px 2px 0px #00000070;
    margin-right: 10px;
    position: relative;
    padding: 30px 0px 20px 30px;
    width: 60px;
    height: 60px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: 5px;
}

/**黑夜模式开关**/
.switch {
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    font-size: 11px;
    margin-bottom: 10px;
    color: var(--grey);
}

.switch span {
    margin-right: 5px;
}

#oneblog-protect {
    display: none;
}

.switchBtn {
    margin-left: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 30px;
    height: 15px;
    background-color: var(--grey);
    border-radius: 20px;
    cursor: pointer;
    transition-duration: .2s;
}

.switchBtn::after {
    content: "";
    position: absolute;
    height: 5px;
    width: 5px;
    left: 0;
    background-color: transparent;
    border-radius: 50%;
    transition-duration: .2s;
    box-shadow: 5px 2px 7px rgba(8, 8, 8, 0.26);
    border: 5px solid white;
}

#oneblog-protect:checked + .switchBtn::after {
    transform: translateX(100%);
    transition-duration: .2s;
    background-color: white;
}

#oneblog-protect:checked + .switchBtn {
    background-color: var(--dark-grey);
    transition-duration: .2s;
}
/**黑夜模式开关结束**/



/**不同分辨率的设备兼容 该部分必须放在末尾**/
@media only screen and (max-width: 380px) {
    /**书单列表兼容**/
    .book-name {
        max-width: 75px;
    }
}

@media only screen and (max-width: 360px) {
    /**书单列表兼容**/
    .book-name {
        max-width: 72px;
    }
    
    .book-info {
        max-width: 180px;
    }
}