/* 通用背景样式 - 与Home页面一致的Google蓝色渐变 */

/* 粒子背景容器 - 与Home页面一致的Google蓝色渐变背景 */
#particles-js {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    background: linear-gradient(135deg, #4285F4 0%, #669DF6 50%, #A8C7FA 100%);
    pointer-events: all;
}

/* 粒子背景的 canvas 元素 */
#particles-js > canvas {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
}

/* 主体容器透明效果 - 这是关键 */
.blog-body {
    position: relative;
    z-index: 2;
    pointer-events: none;
}

/* 恢复内容区域的鼠标事件 */
.blog-body * {
    pointer-events: auto;
}

.blog-body > .layui-container {
    background-color: transparent !important;
    box-shadow: none !important;
}

/* 所有卡片和内容区域使用磨砂玻璃效果 */
.blog-body .left-box,
.blog-body .blog-card,
.blog-body .blogerinfo,
.blog-body .article,
.blog-body .blog-nav-two,
.blog-body .blog-pagebox,
.blog-body .sitemap,
.blog-body .article-detail,
.blog-body .article-component,
.blog-body .article-music,
.blog-body .comment-editor,
.blog-body .comment-item,
.blog-body .topdiv,
.blog-body .chatroom {
    background-color: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 1px 3px rgba(60, 64, 67, 0.15) !important;
}

/* 标题区域稍微不透明一些 */
.blog-body .left-box-title,
.blog-body .blog-card-title {
    background-color: rgba(255, 255, 255, 0.9) !important;
}

/* 时间轴内容区域 */
.cd-timeline-content {
    background-color: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 1px 3px rgba(60, 64, 67, 0.15) !important;
}

/* 关于页面容器 */
.blog-about-container {
    background-color: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.blog-nav-follow {
    background-color: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* 确保图片和其他内容不受影响 */
.blog-body img {
    background-color: transparent !important;
}

/* 文章列表页的文章卡片 */
.blog-body .article-list-container {
    background-color: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 1px 3px rgba(60, 64, 67, 0.15) !important;
}

/* 分页组件 */
.laypage-main {
    background-color: transparent !important;
}

/* 导航栏保持不透明 */
.blog-nav {
    background-color: #FFFFFF !important;
}

/* 页脚也使用磨砂玻璃效果 */
.blog-footer {
    background-color: rgba(241, 243, 244, 0.9) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}