/* ==========================================================================
   1. Header & Navigation / 顶栏与导航
   ========================================================================== */

/* 顶栏分类下拉菜单文字统一为白色 */
header .dropdown ul li a,
body.theme-dark header .dropdown ul li a,
html.theme-dark header .dropdown ul li a {
    color: #fff !important;
}

/* Header 背景与模糊效果 */
header {
    background: rgba(200, 220, 255, 0.85) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.04) !important;
    transition: background 0.3s, box-shadow 0.3s !important;
}

/* Header 文字颜色 */
header, header * {
    color: #222 !important;
}

/* Header Dark Mode */
body.theme-dark header,
html.theme-dark header {
    background: rgba(30, 30, 30, 0.85) !important;
    box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.12) !important;
}

body.theme-dark header, body.theme-dark header *,
html.theme-dark header, html.theme-dark header * {
    color: #eee !important;
}

/* ==========================================================================
   2. Card Styles (Index List) / 首页文章卡片样式
   ========================================================================== */

/* 通用卡片圆角与过渡 */
section#index-list > ul > li article .banner,
section#index-list > ul > li article .content-wrap {
    transition: box-shadow 0.3s, border-radius 0.3s !important;
}

/* 2.1 带 Banner 图片的卡片 */
/* 图片区域：上方圆角 */
section#index-list > ul > li article .banner {
    border-radius: 14px 14px 0 0 !important;
    -webkit-border-radius: 14px 14px 0 0 !important;
    overflow: hidden !important;
    /* 宽屏模式下图片阴影 (Light Mode) */
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.10) !important;
}

/* 图片本身继承圆角 */
section#index-list > ul > li article .banner img {
    border-radius: inherit !important;
    -webkit-border-radius: inherit !important;
}

/* 内容区域：下方圆角 (紧接 Banner) */
section#index-list > ul > li article .banner + .content-wrap,
section#index-list > ul > li article:has(> a > .banner) > .content-wrap {
    border-radius: 0 0 14px 14px !important;
    -webkit-border-radius: 0 0 14px 14px !important;
    overflow: hidden !important;
}

/* Dark Mode overrides for Banner Card */
body.theme-dark section#index-list > ul > li article .banner,
html.theme-dark section#index-list > ul > li article .banner,
.theme-dark section#index-list > ul > li article .banner {
    border-radius: 14px 14px 0 0 !important;
    -webkit-border-radius: 14px 14px 0 0 !important;
}

body.theme-dark section#index-list > ul > li article .banner + .content-wrap,
html.theme-dark section#index-list > ul > li article .banner + .content-wrap,
.theme-dark section#index-list > ul > li article .banner + .content-wrap,
body.theme-dark section#index-list > ul > li article:has(> a > .banner) > .content-wrap,
html.theme-dark section#index-list > ul > li article:has(> a > .banner) > .content-wrap,
.theme-dark section#index-list > ul > li article:has(> a > .banner) > .content-wrap {
    border-radius: 0 0 14px 14px !important;
    -webkit-border-radius: 0 0 14px 14px !important;
}

/* 2.2 纯文字卡片 (无 Banner) */
/* 整体圆角 */
section#index-list > ul > li article:not(:has(.banner)) .content-wrap {
    border-radius: 14px !important;
}

/* 内容区域基础样式 */
section#index-list > ul > li article .content-wrap {
    background: #ffffff !important;
    overflow: hidden !important;
    /* Light Mode Shadow */
    box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.10) !important;
}

/* Dark Mode Content Wrap */
body.theme-dark section#index-list > ul > li article .content-wrap,
html.theme-dark section#index-list > ul > li article .content-wrap,
.theme-dark section#index-list > ul > li article .content-wrap {
    background: #1e1e25 !important;
    /* Dark Mode Shadow */
    box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.32) !important;
}

/* 2.3 消除父级遮罩与背景 */
section#index-list > ul > li,
section#index-list > ul > li.masonry-item,
section#index-list > ul > li article.yue {
    background: transparent !important;
    box-shadow: none !important;
}

/* Dark Mode Reset (合并选择器) */
.theme-dark section#index-list > ul > li,
.theme-dark section#index-list > ul > li.masonry-item,
.theme-dark section#index-list > ul > li article.yue,
html.theme-dark section#index-list > ul > li,
html.theme-dark section#index-list > ul > li.masonry-item,
html.theme-dark section#index-list > ul > li article.yue,
body.theme-dark section#index-list > ul > li,
body.theme-dark section#index-list > ul > li.masonry-item,
body.theme-dark section#index-list > ul > li article.yue {
    background: transparent !important;
    box-shadow: none !important;
}

/* ==========================================================================
   3. Responsive & Layout / 响应式与布局调整
   ========================================================================== */

/* 宽屏 (>= 767.5px) */
@media screen and (min-width: 767.5px) {
    /* 移除主页文章黑框 */
    section#index-list > ul > li:not(.style-2) {
        border: none !important;
    }

    /* Masonry Item 悬浮效果 */
    #index-list .masonry-item {
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
        transition: box-shadow 0.3s ease-in-out;
    }
    #index-list .masonry-item:hover {
        box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.3);
    }
}

/* 窄屏 (<= 767.5px) */
@media screen and (max-width: 767.5px) {
    /* Article 背景透明 */
    #index-list .masonry-item article.yue,
    #index-list .masonry-item.style-1 article.yue,
    #index-list .masonry-item.style-2 article.yue {
        background: transparent !important;
        box-shadow: none !important;
    }

    /* Content Wrap 背景色 (Light) */
    #index-list .masonry-item .content-wrap,
    #index-list .masonry-item.style-1 .content-wrap,
    #index-list .masonry-item.style-2 .content-wrap {
        background: #f5f5f5 !important;
    }

    /* Content Wrap 背景色 (Dark) */
    body.theme-dark #index-list .masonry-item .content-wrap,
    body.theme-dark #index-list .masonry-item.style-1 .content-wrap,
    body.theme-dark #index-list .masonry-item.style-2 .content-wrap,
    html.theme-dark #index-list .masonry-item .content-wrap,
    html.theme-dark #index-list .masonry-item.style-1 .content-wrap,
    html.theme-dark #index-list .masonry-item.style-2 .content-wrap {
        background: #1e1e1e !important;
    }

    /* 窄屏下移除卡片阴影，Banner 全圆角 */
    section#index-list > ul > li article .content-wrap {
        box-shadow: none !important;
    }
    
    /* Dark Mode Shadow Reset */
    body.theme-dark section#index-list > ul > li article .content-wrap,
    html.theme-dark section#index-list > ul > li article .content-wrap,
    .theme-dark section#index-list > ul > li article .content-wrap {
        box-shadow: none !important;
    }

    /* Banner 圆角统一 */
    section#index-list > ul > li article .banner,
    body.theme-dark section#index-list > ul > li article .banner,
    html.theme-dark section#index-list > ul > li article .banner,
    .theme-dark section#index-list > ul > li article .banner {
        border-radius: 14px !important;
        -webkit-border-radius: 14px !important;
        overflow: hidden !important;
    }

    /* 窄屏下 Masonry 卡片圆角 (从原嵌套错误中提取) */
    #index-list .masonry-item .content-wrap,
    #index-list .masonry-item.style-1 .content-wrap,
    #index-list .masonry-item.style-2 .content-wrap {
        border-radius: 14px !important;
        overflow: hidden;
    }
    
    body.theme-dark #index-list .masonry-item .content-wrap,
    body.theme-dark #index-list .masonry-item.style-1 .content-wrap,
    body.theme-dark #index-list .masonry-item.style-2 .content-wrap,
    html.theme-dark #index-list .masonry-item .content-wrap,
    html.theme-dark #index-list .masonry-item.style-1 .content-wrap,
    html.theme-dark #index-list .masonry-item.style-2 .content-wrap {
        border-radius: 14px !important;
        overflow: hidden;
    }
}

/* ==========================================================================
   4. Global & Components / 全局与组件
   ========================================================================== */

/* 全局重置 */
html, body {
    margin: 0 !important;
    box-sizing: border-box;
}

/* Main 背景 */
main {
    background: #f5f5f5 !important;
}
.theme-dark main, html.theme-dark main, body.theme-dark main {
    background: #1e1e1e !important;
}

/* Board List Item (侧栏/板块) */
.board-list .board-item {
    background: #ffffff !important;
}
.theme-dark .board-list .board-item {
    background: #1e1e25 !important;
}

/* TOC (目录) 样式 */
.TOC, .toc-container {
    background: rgba(196, 196, 196, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.TOC .toc-link, .toc-container .toc-link {
    color: #222;
}
.TOC .toc-link.is-active, .toc-container .toc-link.is-active {
    color: inherit !important;
}
.TOC::before {
    color: #222 !important;
}

/* TOC Dark Mode */
.theme-dark .TOC, .theme-dark .toc-container {
    background: rgba(30, 30, 30, 0.6);
}
.theme-dark .TOC .toc-link, .theme-dark .toc-container .toc-link {
    color: #eee;
}
.theme-dark .TOC::before {
    color: #eee !important;
}

/* 横版文章最小高度 */
.app-landscape article.yue {
    min-height: 800px !important;
}