/* ========================================
   Homepage Glassmorphism Design
   Inspired by Hexo Redefine Theme
   ======================================== */

/* ========================================
   1. Full-Page Background System
   ======================================== */

body {
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    /* Background will be set by JavaScript */
}

/* Optional: Subtle overlay for better text contrast */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit;
    filter: brightness(0.95);
    z-index: -2;
    pointer-events: none;
}

/* Remove header-specific background */
#page-header {
    background-image: none !important;
    background-color: transparent !important;
}

/* Transparent content areas */
#content-inner,
#recent-posts {
    background: transparent !important;
}

/* ========================================
   2. Glassmorphism Cards
   ======================================== */

/* Article Cards - Base Style */
.recent-post-item {
    background: rgba(255, 255, 255, 0.65) !important;
    backdrop-filter: blur(15px) saturate(120%);
    -webkit-backdrop-filter: blur(15px) saturate(120%);
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.recent-post-item:hover {
    background: rgba(255, 255, 255, 0.75) !important;
    transform: translateY(-4px);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.12);
}

/* Sidebar Cards */
#aside-content .card-widget {
    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05);
    border-radius: 12px;
    transition: all 0.3s ease;
}

#aside-content .card-widget:hover {
    background: rgba(255, 255, 255, 0.7) !important;
}

/* ========================================
   3. Adaptive Styling for Dark Backgrounds
   ======================================== */

/* When background is dark (will be added by JS) */
body.dark-background .recent-post-item {
    background: rgba(40, 40, 40, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

body.dark-background .recent-post-item:hover {
    background: rgba(50, 50, 50, 0.85) !important;
}

body.dark-background #aside-content .card-widget {
    background: rgba(35, 35, 35, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-background #aside-content .card-widget:hover {
    background: rgba(45, 45, 45, 0.8) !important;
}

/* Enhance text contrast on dark backgrounds */
body.dark-background .recent-post-item .article-title,
body.dark-background .recent-post-item .article-meta-wrap,
body.dark-background .card-widget-card-info,
body.dark-background .card-widget .item-headline {
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

body.dark-background .recent-post-item .content,
body.dark-background .card-widget .card-content {
    color: rgba(255, 255, 255, 0.9);
}

/* ========================================
   4. Advanced Adaptive Styling for Light Backgrounds
   ======================================== */

/* When background is light (default) */
body.light-background .recent-post-item {
    background: rgba(255, 255, 255, 0.7) !important;
}

body.light-background .recent-post-item:hover {
    background: rgba(255, 255, 255, 0.8) !important;
}

body.light-background #aside-content .card-widget {
    background: rgba(255, 255, 255, 0.65) !important;
}

/* Enhanced Text Contrast on Light Backgrounds - 浅色背景下增强文字对比度 */
/* Article Cards - 文章卡片 */
body.light-background .recent-post-item .article-title {
    color: #1a1a1a !important;
    font-weight: 600;
}

body.light-background .recent-post-item .article-meta-wrap,
body.light-background .recent-post-item .article-meta-wrap a,
body.light-background .recent-post-item .article-meta-wrap span {
    color: #2a2a2a !important;
}

body.light-background .recent-post-item .content {
    color: #333333 !important;
}

/* Sidebar Widgets - 侧边栏小部件 */
body.light-background .card-widget .item-headline,
body.light-background .card-widget .item-headline a {
    color: #1a1a1a !important;
    font-weight: 600;
}

body.light-background .card-widget .card-content,
body.light-background .card-widget .card-content p,
body.light-background .card-widget .card-content span {
    color: #2a2a2a !important;
}

/* Author Info - 作者信息 */
body.light-background .card-widget.card-info .author-info-name {
    color: #1a1a1a !important;
    font-weight: 600;
}

body.light-background .card-widget.card-info .author-info-description {
    color: #333333 !important;
}

body.light-background .card-widget.card-info .site-data .headline {
    color: #2a2a2a !important;
}

body.light-background .card-widget.card-info .site-data .length-num {
    color: #000000 !important;
    font-weight: 600;
}

body.light-background .card-widget.card-info .card-info-social-icons a,
body.light-background .card-widget.card-info .card-info-social-icons i {
    color: #2a2a2a !important;
}

/* Announcement - 公告 */
body.light-background .card-widget.card-announcement .announcement_content,
body.light-background .card-widget.card-announcement .announcement_content * {
    color: #2a2a2a !important;
}

/* Web Info - 网站信息 */
body.light-background .card-widget.card-webinfo .webinfo-item .item-name {
    color: #2a2a2a !important;
}

body.light-background .card-widget.card-webinfo .webinfo-item .item-count {
    color: #000000 !important;
    font-weight: 600;
}

/* Archive List - 归档列表 */
body.light-background .card-archive-list-link,
body.light-background .card-archive-list-link a {
    color: #2a2a2a !important;
}

body.light-background .card-archive-list .card-archive-list-date {
    color: #666666 !important;
}

/* Categories - 分类 */
body.light-background .card-category-list-item a {
    color: #2a2a2a !important;
}

body.light-background .card-category-list-count {
    color: #666666 !important;
}

/* Tags - 标签 */
body.light-background .card-tag-cloud a {
    color: #2a2a2a !important;
}

/* Web Info - 网站信息 */
body.light-background .card-webinfo .webinfo-item-title {
    color: #2a2a2a !important;
}

body.light-background .card-webinfo .webinfo-item-content {
    color: #000000 !important;
    font-weight: 600;
}

/* Recent Posts Widget - 最近文章 */
body.light-background .card-recent-post .aside-list-item .title {
    color: #2a2a2a !important;
}

body.light-background .card-recent-post .aside-list-item .time {
    color: #666666 !important;
}

/* ========================================
   5. Dark Mode Support (Theme Setting)
   ======================================== */

@media (prefers-color-scheme: dark) {
    body::before {
        filter: brightness(0.85);
    }

    .recent-post-item {
        background: rgba(30, 30, 30, 0.75) !important;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    #aside-content .card-widget {
        background: rgba(25, 25, 25, 0.7) !important;
        border: 1px solid rgba(255, 255, 255, 0.08);
    }
}

[data-theme="dark"] body::before {
    filter: brightness(0.85);
}

[data-theme="dark"] .recent-post-item {
    background: rgba(30, 30, 30, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] #aside-content .card-widget {
    background: rgba(25, 25, 25, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ========================================
   6. Fallback for Unsupported Browsers
   ======================================== */

@supports not (backdrop-filter: blur(12px)) {
    .recent-post-item {
        background: rgba(255, 255, 255, 0.92) !important;
    }

    #aside-content .card-widget {
        background: rgba(255, 255, 255, 0.88) !important;
    }

    body.dark-background .recent-post-item {
        background: rgba(40, 40, 40, 0.95) !important;
    }

    body.dark-background #aside-content .card-widget {
        background: rgba(35, 35, 35, 0.92) !important;
    }
}

/* ========================================
   7. Mobile Optimization
   ======================================== */

@media screen and (max-width: 768px) {

    /* Reduce blur intensity for better performance */
    .recent-post-item {
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    #aside-content .card-widget {
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }

    /* Use scrolling background on mobile */
    body {
        background-attachment: scroll;
    }
}

/* ========================================
   8. Smooth Loading Transitions
   ======================================== */

.recent-post-item,
#aside-content .card-widget {
    opacity: 0;
    animation: fadeInUp 0.6s ease forwards;
}

.recent-post-item:nth-child(1) {
    animation-delay: 0.1s;
}

.recent-post-item:nth-child(2) {
    animation-delay: 0.2s;
}

.recent-post-item:nth-child(3) {
    animation-delay: 0.3s;
}

.recent-post-item:nth-child(4) {
    animation-delay: 0.4s;
}

.recent-post-item:nth-child(5) {
    animation-delay: 0.5s;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   9. Page Header Title Enhancement
   ======================================== */

#page-header #site-title,
#page-header #site-subtitle {
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
}

/* ========================================
   10. Pagination Glassmorphism
   ======================================== */

#pagination {
    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

body.dark-background #pagination {
    background: rgba(40, 40, 40, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ========================================
   11. Enhanced Text Contrast for Dark Backgrounds
   ======================================== */

/* Article Card Text - Critical Fixes */
body.dark-background .recent-post-item .article-title {
    color: #ffffff !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

body.dark-background .recent-post-item .article-meta-wrap,
body.dark-background .recent-post-item .article-meta-wrap a,
body.dark-background .recent-post-item .article-meta-wrap span {
    color: rgba(255, 255, 255, 0.85) !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

body.dark-background .recent-post-item .content {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Sidebar Text Contrast */
body.dark-background #aside-content .card-widget .card-content,
body.dark-background .card-archive-list-link,
body.dark-background .card-archive-list-link a {
    color: rgba(255, 255, 255, 0.9) !important;
}

body.dark-background .card-widget .item-headline,
body.dark-background .card-widget .item-headline a {
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

body.dark-background .card-archive-list .card-archive-list-date {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Site Branding on Dark Backgrounds */
body.dark-background #site-name,
body.dark-background #site-title {
    color: #ffffff !important;
    text-shadow: 0 3px 12px rgba(0, 0, 0, 0.6);
}

body.dark-background #site-subtitle {
    color: rgba(255, 255, 255, 0.9) !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* ========================================
   12. Transparent Navigation Bar
   ======================================== */

#nav {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}

/* Adaptive Nav Menu Colors - 导航栏始终为白色 (Always White) */
#nav .menus_items .menus_item a,
#nav .nav-site-title,
#nav #site-name {
    color: #ffffff !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) !important;
}

/* 移除原有的浅色背景下的黑色导航样式 */
/* body.light-background #nav .menus_items .menus_item a {
    color: rgba(0, 0, 0, 0.85) !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
} */

/* ========================================
   13. Transparent Adaptive Pagination
   ======================================== */

#pagination {
    background: transparent !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: none !important;
    box-shadow: none !important;
}

/* Pagination Button Base Styles */
.pagination .page-number,
.pagination .extend {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(0, 0, 0, 0.8);
    transition: all 0.3s ease;
}

.pagination .page-number:hover,
.pagination .extend:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    transform: translateY(-2px);
}

/* Dark Background Pagination Buttons */
body.dark-background .pagination .page-number,
body.dark-background .pagination .extend {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.9) !important;
}

body.dark-background .pagination .page-number:hover,
body.dark-background .pagination .extend:hover {
    background: rgba(255, 255, 255, 0.2) !important;
}

/* Active Page Number */
.pagination .page-number.current {
    background: rgba(0, 196, 182, 0.85) !important;
    color: #ffffff !important;
    border: 1px solid rgba(0, 196, 182, 0.5);
}

body.dark-background .pagination .page-number.current {
    background: rgba(0, 196, 182, 0.9) !important;
}

/* ========================================
   14. Footer Glassmorphism
   ======================================== */

#footer {
    background: rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

body.dark-background #footer {
    background: rgba(30, 30, 30, 0.6) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-background #footer,
body.dark-background #footer a,
body.dark-background #footer-wrap {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* ========================================
   15. Link Hover States
   ======================================== */

body.dark-background a:hover {
    color: rgba(0, 196, 182, 1) !important;
}

/* ========================================
   16. Sidebar Widget Specific Fixes
   ======================================== */

/* Card Info (Avatar/Stats) */
body.dark-background .card-widget.card-info .card-info-avatar,
body.dark-background .card-widget.card-info .author-info__name,
body.dark-background .card-widget.card-info .author-info__description {
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

body.dark-background .card-widget.card-info .card-info-data-item .headline {
    color: rgba(255, 255, 255, 0.9) !important;
}

body.dark-background .card-widget.card-info .card-info-social-icons a {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Card Announcement */
body.dark-background .card-widget.card-announcement .item-headline,
body.dark-background .card-widget.card-announcement .announcement_content,
body.dark-background .card-widget.card-announcement .announcement_content * {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Card Recent Post */
body.dark-background .card-widget.card-recent-post .aside-list-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-background .card-widget.card-recent-post .aside-list-item .thumbnail,
body.dark-background .card-widget.card-recent-post .aside-list-item .content .title,
body.dark-background .card-widget.card-recent-post .aside-list-item .content .time {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Card Categories */
body.dark-background .card-widget.card-categories .card-category-list-item a {
    color: rgba(255, 255, 255, 0.9) !important;
}

body.dark-background .card-widget.card-categories .card-category-list-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

body.dark-background .card-widget.card-categories .card-category-list-count {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Card Tags */
body.dark-background .card-widget.card-tags .card-tag-cloud a {
    background: transparent !important;
    /* 取消背景 */
    color: rgba(255, 255, 255, 0.9) !important;
    border: none !important;
    /* 取消边框 */
}

body.dark-background .card-widget.card-tags .card-tag-cloud a:hover {
    background: transparent !important;
    /* 悬停时也保持透明 */
    color: #ffffff !important;
    text-decoration: underline;
    /* 悬停时添加下划线作为视觉反馈 */
}

/* Card Webinfo */
body.dark-background .card-widget.card-webinfo .webinfo-item .webinfo-item-title,
body.dark-background .card-widget.card-webinfo .webinfo-item .webinfo-item-content {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Rightside Config Button */
body.dark-background .rightside-config {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

body.dark-background .rightside-config:hover {
    background: rgba(255, 255, 255, 0.15) !important;
}

body.dark-background .rightside-config i {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Go-Up Button */
body.dark-background #go-up {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

body.dark-background #go-up:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    transform: translateY(-3px);
}

body.dark-background #go-up i,
body.dark-background .go-up-button i {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* All Card Widget Headings */
body.dark-background .card-widget .card-content .item-headline,
body.dark-background .card-widget .item-headline {
    color: #ffffff !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}

/* ========================================
   17. Additional Specific Fixes
   ======================================== */

/* Author Info - More Specific Selectors */
body.dark-background .card-info .author-info-name,
body.dark-background .card-info .author-info__name {
    color: #ffffff !important;
}

body.dark-background .card-info .author-info-description,
body.dark-background .card-info .author-info__description {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Stats Labels and Numbers */
body.dark-background .card-info .site-data .headline,
body.dark-background .card-info .author-info__stats-item .headline {
    color: rgba(255, 255, 255, 0.8) !important;
}

body.dark-background .card-info .site-data .length-num,
body.dark-background .card-info .author-info__stats-item .length-num {
    color: #ffffff !important;
    font-weight: 600;
}

/* Social Icons */
body.dark-background .card-info-social-icons a,
body.dark-background .card-info-social-icons i {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Web Info Specific */
body.dark-background .card-webinfo .item-name {
    color: rgba(255, 255, 255, 0.85) !important;
}

body.dark-background .card-webinfo .item-count,
body.dark-background .card-webinfo .webinfo-item-content {
    color: #ffffff !important;
    font-weight: 500;
}

/* Recent Post Widget */
body.dark-background .card-recent-post .content time {
    color: rgba(255, 255, 255, 0.75) !important;
}

/* Archives List */
body.dark-background .card-archive-list .card-archive-list-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* ========================================
   18. Post Page Glassmorphism
   ======================================== */

/* Post Content Container */
#post {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(15px) saturate(120%);
    -webkit-backdrop-filter: blur(15px) saturate(120%);
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    padding: 2rem;
}

/* Post Content - 与 #post 保持一致的宽度，白色80%透明背景 */
#post .post-content,
#post article.container,
#post .container.post-content,
#article-container {
    width: 100% !important;
    max-width: 100% !important;
    background: rgba(255, 255, 255, 0.8) !important;
    padding: 1.5rem;
    margin: 0;
    border-radius: 8px;
}

/* 覆盖 .container 类的默认宽度限制 */
#post .container {
    max-width: none !important;
    width: 100% !important;
}

body.dark-background #post {
    background: rgba(40, 40, 40, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Post Title */
body.dark-background #post-info .post-title {
    color: #ffffff !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* Post Meta */
body.dark-background #post-info .post-meta-wrap,
body.dark-background #post-info .post-meta-wrap *,
body.dark-background #post-meta .meta-firstline,
body.dark-background #post-meta .meta-secondline {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Post Content Text */
body.dark-background #article-container {
    color: rgba(255, 255, 255, 0.9) !important;
}

body.dark-background #article-container h1,
body.dark-background #article-container h2,
body.dark-background #article-container h3,
body.dark-background #article-container h4,
body.dark-background #article-container h5,
body.dark-background #article-container h6 {
    color: #ffffff !important;
}

body.dark-background #article-container a {
    color: rgba(0, 196, 182, 1) !important;
}

/* Code Blocks - 80% 白色透明背景 + 深色高对比文字 */
body.dark-background #article-container pre,
body.dark-background #article-container figure.highlight {
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

body.dark-background #article-container pre code,
body.dark-background #article-container code {
    background: transparent !important;
    color: #1a1a1a !important;
}

/* 代码高亮颜色 - 高对比度 */
body.dark-background #article-container .hljs-keyword,
body.dark-background #article-container .hljs-selector-tag {
    color: #0066cc !important;
}

body.dark-background #article-container .hljs-string,
body.dark-background #article-container .hljs-value {
    color: #c41a16 !important;
}

body.dark-background #article-container .hljs-comment {
    color: #6a737d !important;
}

body.dark-background #article-container .hljs-function,
body.dark-background #article-container .hljs-title {
    color: #6f42c1 !important;
}

body.dark-background #article-container .hljs-number {
    color: #005cc5 !important;
}

/* 行内代码 */
body.dark-background #article-container p code,
body.dark-background #article-container li code {
    background: rgba(255, 255, 255, 0.85) !important;
    color: #d63384 !important;
    padding: 2px 6px;
    border-radius: 4px;
}

/* Code Blocks - 浅色背景同样使用白色半透明 + 深色文字 */
body.light-background #article-container pre,
body.light-background #article-container figure.highlight {
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

body.light-background #article-container pre code,
body.light-background #article-container code {
    background: transparent !important;
    color: #1a1a1a !important;
}

/* 浅色背景代码高亮 */
body.light-background #article-container .hljs-keyword,
body.light-background #article-container .hljs-selector-tag {
    color: #0066cc !important;
}

body.light-background #article-container .hljs-string,
body.light-background #article-container .hljs-value {
    color: #c41a16 !important;
}

body.light-background #article-container .hljs-comment {
    color: #6a737d !important;
}

body.light-background #article-container .hljs-function,
body.light-background #article-container .hljs-title {
    color: #6f42c1 !important;
}

body.light-background #article-container .hljs-number {
    color: #005cc5 !important;
}

/* 浅色背景行内代码 */
body.light-background #article-container p code,
body.light-background #article-container li code {
    background: rgba(255, 255, 255, 0.85) !important;
    color: #d63384 !important;
    padding: 2px 6px;
    border-radius: 4px;
}

/* TOC Sidebar */
#aside-content .toc-content {
    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 12px;
}

body.dark-background #aside-content .toc-content {
    background: rgba(35, 35, 35, 0.7) !important;
}

body.dark-background .toc-content .toc-link {
    color: rgba(255, 255, 255, 0.9) !important;
}

body.dark-background .toc-content .toc-link.active {
    color: rgba(0, 196, 182, 1) !important;
}

/* ========================================
   19. Archive/Tag Pages Glassmorphism
   ======================================== */

/* Archive Container - Keep Transparent */
#archive,
.article-sort {
    background: transparent !important;
}

/* Article Sort Items - Match Light Background Style */
.article-sort-item {
    background: rgba(255, 255, 255, 0.65) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

/* Dark Background - ONLY if body has dark-background class */
body.dark-background .article-sort-item {
    background: rgba(40, 40, 40, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Article Item Text - Dark by default, light on dark backgrounds */
.article-sort-item .article-sort-item-title,
.article-sort-item-time {
    color: rgb(76, 73, 72) !important;
}

body.dark-background .article-sort-item .article-sort-item-title,
body.dark-background .article-sort-item-time {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Year Divider - Default Dark Text */
.article-sort-title {
    color: rgb(31, 45, 61) !important;
}

body.dark-background .article-sort-title {
    color: #ffffff !important;
}

/* Tag/Category Pages */
.tag-cloud-list,
.category-list {
    background: transparent !important;
}

body.dark-background .tag-cloud-title,
body.dark-background .category-title {
    color: #ffffff !important;
}

/* ========================================
   20. Category Header Visibility Fix
   ======================================== */

/* Category Header Title (from category-header.js) */
.category-hero-header .category-header-label,
.category-hero-header .category-header-title {
    color: rgb(31, 45, 61) !important;
    text-shadow: none;
}

body.dark-background .category-hero-header .category-header-label,
body.dark-background .category-hero-header .category-header-title {
    color: #ffffff !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* Category Header Description */
.category-hero-header .category-header-description {
    color: rgb(76, 73, 72) !important;
}

body.dark-background .category-hero-header .category-header-description {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Category Stats Bar */
.category-stats-bar {
    background: transparent !important;
}

.category-stats-bar .stat-item .stat-label,
.category-stats-bar .stat-item .stat-value {
    color: rgb(76, 73, 72) !important;
}

body.dark-background .category-stats-bar .stat-item .stat-label {
    color: rgba(255, 255, 255, 0.8) !important;
}

body.dark-background .category-stats-bar .stat-item .stat-value {
    color: #ffffff !important;
    font-weight: 600;
}

/* Category Page Main Content */
#content-inner h1 {
    color: rgb(31, 45, 61) !important;
}

body.dark-background #content-inner h1 {
    color: #ffffff !important;
}

/* Fix: Override white text for headers inside white content containers (like #page) */
/* This ensures headers are visible even in dark mode when the container has a white background */
body.dark-background #page h1,
body.dark-background #page h2 {
    color: #2a2a2a !important;
    /* Deep gray/black for readability on white background */
}

body.dark-background #page p {
    color: #4c4948 !important;
    /* Match metadata/standard text color */
}

/* ========================================
   Homepage Search & Categories (Dark Background)
   深色背景下的首页搜索和分类样式
   ======================================== */

/* 搜索输入框 - Search Input */
body.dark-background .homepage-search-container .homepage-search-input,
body.dark-background .homepage-search-input {
    background: rgba(255, 255, 255, 0.9) !important;
    color: #2a2a2a !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
}

/* 搜索按钮 - Search Button */
body.dark-background .homepage-search-container .homepage-search-btn,
body.dark-background .homepage-search-btn {
    background: #ffffff !important;
    color: #2a2a2a !important;
    border-color: #ffffff !important;
}

body.dark-background .homepage-search-btn i {
    color: #2a2a2a !important;
}

/* 热门分类标签 - Popular Categories Label */
body.dark-background .homepage-search-container .quick-categories-label,
body.dark-background .quick-categories-label {
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* 分类按钮 - Category Buttons */
body.dark-background .homepage-search-container .quick-category-btn,
body.dark-background .quick-category-btn {
    background: rgba(255, 255, 255, 0.9) !important;
    color: #2a2a2a !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}

body.dark-background .homepage-search-container .quick-category-btn:hover,
body.dark-background .quick-category-btn:hover {
    background: #ffffff !important;
    color: var(--theme-color) !important;
    transform: translateY(-2px);
}