:root {
  --trans-light: rgba(255, 255, 255, 0.3);
  --trans-dark: rgba(25, 25, 25, 0.3);
  --border-style: 0.5px solid rgba(0, 0, 0, 0.089); /* 日间模式描边 */
  --border-style-dark: 0.5px solid rgba(255, 255, 255, 0.281); /* 夜间模式描边变量 */
  --backdrop-filter: blur(0.5px) saturate(5%);
}

[data-theme="dark"] {
  --border-style: var(--border-style-dark); /* 夜间模式引用新变量 */
}

/* 首页文章卡片 */
#recent-posts .recent-post-item {
  background: var(--trans-light);
  backdrop-filter: var(--backdrop-filter);
  border-radius: 25px;
  border: var(--border-style);
}

/* 首页侧栏卡片 */
#aside-content .card-widget {
  background: var(--trans-light);
  backdrop-filter: var(--backdrop-filter);
  border-radius: 18px;
  border: var(--border-style);
}

/* 文章页、归档页、普通页面 */
div#post,
div#page,
div#archive {
  background: var(--trans-light);
  backdrop-filter: var(--backdrop-filter);
  border: var(--border-style);
  border-radius: 20px;
}

/* 导航栏 */
#page-header.nav-fixed #nav {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: var(--backdrop-filter);
}

[data-theme="dark"] #page-header.nav-fixed #nav {
  background: rgba(0, 0, 0, 0.7) !important;
}

/* 夜间模式遮罩 */
[data-theme="dark"] #recent-posts .recent-post-item,
[data-theme="dark"] #aside-content .card-widget,
[data-theme="dark"] div#post,
[data-theme="dark"] div#archive,
[data-theme="dark"] div#page {
  background: var(--trans-dark);
}


/* 夜间模式页脚页头遮罩透明 */
[data-theme="dark"] #footer::before {
  background: transparent !important;
}
[data-theme="dark"] #page-header::before {
  background: transparent !important;
}

/* 阅读模式 */
.read-mode #aside-content .card-widget {
  background: rgba(158, 204, 171, 0.5) !important;
}
.read-mode div#post {
  background: rgba(158, 204, 171, 0.5) !important;
}

/* 夜间模式下的阅读模式 */
[data-theme="dark"] .read-mode #aside-content .card-widget {
  background: rgba(25, 25, 25, 0.9) !important;
  color: #ffffff;
}
[data-theme="dark"] .read-mode div#post {
  background: rgba(25, 25, 25, 0.9) !important;
  color: #ffffff;
}



/* ==================== 瀑布流布局专属规则 ==================== */
/* 以下所有样式，仅当 index_layout 为 6 或 7（容器有 .masonry 类）时生效 */
/* 对于布局 1-5，这些规则将完全不起作用 */

/* 1. 调整瀑布流卡片的圆角、阴影和间距 */
#recent-posts.masonry .recent-post-item {
    border-radius: 16px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    width: calc(50% - 12px) !important;
    margin: 0px !important; /* 使用网格间距，覆盖通用边距 */
}

/* 2. 调整瀑布流卡片的封面图缩放效果 */
#recent-posts.masonry .recent-post-item:hover .post-bg {
    transform: scale(1.05) !important;
    transition-duration: 0.6s !important;
}

/* 3. 调整瀑布流封面图高度 */
#recent-posts.masonry .post_cover {
    height: 200px !important;
}



/* 5. 小屏幕下，瀑布流改为单列 */
@media screen and (max-width: 901px) {
    #recent-posts.masonry .recent-post-item {
        width: 100% !important;
        /* 添加左右外边距，为屏幕边缘创造间隙 */
        margin-left: 0px !important;
        margin-right: 0px !important;
        /* 同时调整计算宽度，防止溢出 */
        width: calc(100% - 0px) !important; /* 100% 减去左右外边距总和 */
    }
}


/* ==================== 瀑布流布局专属规则 ==================== */