/* -------- calendar ------ */
.calendartop,
.calendar {
    width: 100%;
    text-align: center;
}

.calendartop {
    line-height: 1.6;
}

.calendar {
    line-height: 2;
}

.calendartop tbody tr:first-child td a {
    padding: .25em .65em;
}

.calendar tbody tr:first-child td {
    background-color: var(--color-text-1-light);
}

.calendar tbody tr:first-child td:first-child {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

.calendar tbody tr:first-child td:last-child {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

.calendar .day,
.calendar td a {
    position: relative;
    color: var(--color-theme-light);
}

.calendar td a {
    text-decoration: underline;
}

.calendar .day::after,
.calendar td a:hover::after {
    content: '';
    display: block;
    width: 24px;
    height: 24px;
    position: absolute;
    left: calc(50% - 12px);
    top: calc(50% - 12px);
    border: 1px solid var(--color-theme-light);
    border-radius: 100%;
}

/* Captcha styles */
.captcha-container {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.captcha {
    width: 6rem;
    height: 2.4rem;
    border-radius: 0.375rem;
    border: 1px solid #d1d5db;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.captcha_input {
    width: 8rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.captcha_input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
}

.icon-eye {
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    background: no-repeat center/contain;
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.0007 12C15.0007 13.6569 13.6576 15 12.0007 15C10.3439 15 9.00073 13.6569 9.00073 12C9.00073 10.3431 10.3439 9 12.0007 9C13.6576 9 15.0007 10.3431 15.0007 12Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M12.0012 5C7.52354 5 3.73326 7.94288 2.45898 12C3.73324 16.0571 7.52354 19 12.0012 19C16.4788 19 20.2691 16.0571 21.5434 12C20.2691 7.94291 16.4788 5 12.0012 5Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}
.icon-comment {
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    background: no-repeat center/contain;
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 -0.5 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.0001 8.517C8.58589 8.517 8.2501 8.85279 8.2501 9.267C8.2501 9.68121 8.58589 10.017 9.0001 10.017V8.517ZM16.0001 10.017C16.4143 10.017 16.7501 9.68121 16.7501 9.267C16.7501 8.85279 16.4143 8.517 16.0001 8.517V10.017ZM9.8751 11.076C9.46089 11.076 9.1251 11.4118 9.1251 11.826C9.1251 12.2402 9.46089 12.576 9.8751 12.576V11.076ZM15.1251 12.576C15.5393 12.576 15.8751 12.2402 15.8751 11.826C15.8751 11.4118 15.5393 11.076 15.1251 11.076V12.576ZM9.1631 5V4.24998L9.15763 4.25002L9.1631 5ZM15.8381 5L15.8438 4.25H15.8381V5ZM19.5001 8.717L18.7501 8.71149V8.717H19.5001ZM19.5001 13.23H18.7501L18.7501 13.2355L19.5001 13.23ZM18.4384 15.8472L17.9042 15.3207L17.9042 15.3207L18.4384 15.8472ZM15.8371 16.947V17.697L15.8426 17.697L15.8371 16.947ZM9.1631 16.947V16.197C9.03469 16.197 8.90843 16.23 8.79641 16.2928L9.1631 16.947ZM5.5001 19H4.7501C4.7501 19.2662 4.89125 19.5125 5.12097 19.6471C5.35068 19.7817 5.63454 19.7844 5.86679 19.6542L5.5001 19ZM5.5001 8.717H6.25012L6.25008 8.71149L5.5001 8.717ZM6.56175 6.09984L6.02756 5.5734H6.02756L6.56175 6.09984ZM9.0001 10.017H16.0001V8.517H9.0001V10.017ZM9.8751 12.576H15.1251V11.076H9.8751V12.576ZM9.1631 5.75H15.8381V4.25H9.1631V5.75ZM15.8324 5.74998C17.4559 5.76225 18.762 7.08806 18.7501 8.71149L20.2501 8.72251C20.2681 6.2708 18.2955 4.26856 15.8438 4.25002L15.8324 5.74998ZM18.7501 8.717V13.23H20.2501V8.717H18.7501ZM18.7501 13.2355C18.7558 14.0153 18.4516 14.7653 17.9042 15.3207L18.9726 16.3736C19.7992 15.5348 20.2587 14.4021 20.2501 13.2245L18.7501 13.2355ZM17.9042 15.3207C17.3569 15.8761 16.6114 16.1913 15.8316 16.197L15.8426 17.697C17.0201 17.6884 18.1461 17.2124 18.9726 16.3736L17.9042 15.3207ZM15.8371 16.197H9.1631V17.697H15.8371V16.197ZM8.79641 16.2928L5.13341 18.3458L5.86679 19.6542L9.52979 17.6012L8.79641 16.2928ZM6.2501 19V8.717H4.7501V19H6.2501ZM6.25008 8.71149C6.24435 7.93175 6.54862 7.18167 7.09595 6.62627L6.02756 5.5734C5.20098 6.41216 4.74147 7.54494 4.75012 8.72251L6.25008 8.71149ZM7.09595 6.62627C7.64328 6.07088 8.38882 5.75566 9.16857 5.74998L9.15763 4.25002C7.98006 4.2586 6.85413 4.73464 6.02756 5.5734L7.09595 6.62627Z" fill="black"/></svg>');
}
.icon-like {
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    background: no-repeat center/contain;
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 32 32" fill="black" xmlns="http://www.w3.org/2000/svg"><path d="M10.5,8v2C9.122,10,8,11.121,8,12.5H6C6,10.019,8.019,8,10.5,8z"/><path d="M21.5,5c-2.116,0-4.093,0.881-5.5,2.406C14.593,5.881,12.616,5,10.5,5C6.364,5,3,8.333,3,12.5 C3,21.542,16,27,16,27s13-5.458,13-14.5C29,8.333,25.636,5,21.5,5z M16,24.797C13.378,23.521,5,18.938,5,12.5 C5,9.467,7.467,7,10.5,7c1.55,0,2.982,0.626,4.03,1.762l0.735,0.797h1.47l0.735-0.797C18.518,7.626,19.95,7,21.5,7 c3.033,0,5.5,2.467,5.5,5.5C27,18.938,18.622,23.521,16,24.797z"/></svg>');
}

article.border {
    border: none !important;
    box-shadow: none !important;
}

body {
    background-color: #b3b3b3; /* 浅灰色背景，与 bg-gray-50 一致 */
}

/* -------- 顶部导航栏样式优化 -------- */
/* 确保PC端导航栏有足够的间距，不会挤在一起 */
@media (min-width: 1024px) {
    /* 导航栏容器：增加左右padding */
    nav > div.max-w-7xl {
        padding-left: 1.5rem !important; /* 24px */
        padding-right: 1.5rem !important; /* 24px */
    }
    
    /* 导航栏主容器：确保元素之间有足够间距 */
    nav > div > div.flex.items-center {
        gap: 1.5rem !important; /* 24px，确保元素之间有足够间距 */
    }
    
    /* 确保搜索框有足够的宽度和flex属性 */
    nav form[name="head-search"] {
        min-width: 20rem !important;
        max-width: 24rem !important;
        flex-shrink: 0 !important;
    }
    
    /* 确保用户操作区域有足够的间距 */
    nav > div > div.flex.items-center > div:last-of-type.hidden {
        gap: 1rem !important; /* 16px */
        flex-shrink: 0 !important;
    }
    
    /* 确保网站名称不会被压缩 */
    nav a.text-xl {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        margin-right: auto !important; /* 推送到左边 */
    }
    
    /* 确保用户操作区域在右侧 */
    nav > div > div.flex.items-center > div.hidden.lg\:flex {
        gap: 1rem !important;
        flex-shrink: 0 !important;
        margin-left: auto !important; /* 推送到右边 */
    }
    
    /* 确保搜索按钮在PC端显示 */
    nav form[name="head-search"] button[type="submit"] {
        display: inline-flex !important;
        visibility: visible !important;
    }
}

/* -------- post list actions (comments & views) ------ */
/* 移动端优化：提高点击区域、压缩间距，增强可读性 */
.log-actions a {
    padding: 4px 6px;
    border-radius: 4px;
}

@media (max-width: 767px) {
    .log-actions {
        font-size: 0.875rem; /* 等效于text-sm */
    }
    .log-actions a {
        background-color: transparent;
    }
}

/* -------- mobile drawer ------ */
/* 移动端左侧抽屉菜单样式：支持从左侧滑出与遮罩层 */
#mobile-menu.mobile-drawer {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 16rem; /* 约等于 256px */
    max-width: 85vw;
    background-color: #ffffff;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 50;
    overflow-y: auto;
}

#mobile-menu.mobile-drawer.open {
    transform: translateX(0);
}

#mobile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    display: none;
    z-index: 40;
}

#mobile-overlay.show {
    display: block;
}

body.overflow-hidden {
    overflow: hidden;
}

/* -------- 手机端用户菜单下拉样式 -------- */
#mobile-user-menu {
    position: absolute !important;
    right: 0 !important;
    top: 100% !important;
    margin-top: 0.5rem !important;
    z-index: 9999 !important;
    min-width: 8rem !important;
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 0.375rem !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
}

#mobile-user-menu.hidden {
    display: none !important;
}

/* 确保父容器不会裁剪菜单 */
#mobile-user-menu-toggle {
    position: relative !important;
}

#mobile-user-menu-toggle + div.relative,
div.relative:has(#mobile-user-menu) {
    position: relative !important;
    overflow: visible !important;
    z-index: 9999 !important;
}

/* 确保导航栏容器不会裁剪菜单 */
nav > div.max-w-7xl {
    overflow: visible !important;
}

nav > div > div.flex.items-center {
    overflow: visible !important;
}

/* 移动端特殊处理 */
@media (max-width: 1023px) {
    #mobile-user-menu {
        z-index: 10000 !important;
    }
    
    /* 确保移动端导航栏不会裁剪菜单 */
    nav {
        overflow: visible !important;
    }
    
    nav > div.max-w-7xl {
        overflow: visible !important;
    }
    
    nav > div > div.flex.items-center {
        overflow: visible !important;
    }
    
    nav > div > div.flex.items-center > div.flex.lg\:hidden {
        overflow: visible !important;
    }
}

/* -------- 文章内容图片居中显示 ------ */
.prose img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    height: auto;
}

/* -------- 强制代码块缩进解决方案 -------- */
/* 使用更高优先级的选择器覆盖所有默认样式 */

/* ========== 确保内容区在所有屏幕尺寸下都有缩进（与导航栏一致） ========== */
/* 基础样式：确保 flex-1 容器有 padding（与导航栏 px-4 lg:px-6 保持一致） */
/* 移动端：px-4 (16px) */
div.flex-1.px-4,
.flex-1.px-4,
div.flex-1[class*="px-4"]:not([class*="lg:px-6"]),
.flex-1[class*="px-4"]:not([class*="lg:px-6"]) {
    padding-left: 16px !important;
    padding-right: 16px !important;
}

/* 大屏幕（lg，1024px+）：px-6 (24px)，与导航栏保持一致 */
@media (min-width: 1024px) {
    div.flex-1[class*="px-4"],
    .flex-1[class*="px-4"],
    div.flex-1.px-4,
    .flex-1.px-4 {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
}

/* 如果使用了 p-4（全方向 padding），也要确保左右有 padding */
div.flex-1.p-4,
.flex-1.p-4 {
    padding-left: 16px !important;
    padding-right: 16px !important;
}

@media (min-width: 1024px) {
    div.flex-1.p-4,
    .flex-1.p-4 {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
}

/* ========== 手机端（小屏幕）代码块和引用块处理 ========== */
@media (max-width: 1024px) {
    /* 超小屏幕（小于 480px）调整 padding，确保最小缩进 */
    @media (max-width: 479px) {
        .flex-1.px-3,
        .flex-1.px-4 {
            padding-left: 10px !important;
            padding-right: 10px !important;
        }
    }
    
    /* 2. 移除 article 容器的 padding，避免与 prose padding 叠加 */
    article.max-w-3xl,
    .content-card {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-inline-start: 0 !important;
        padding-inline-end: 0 !important;
    }
    
    /* 3. 给 prose 容器添加 padding，让正文内容有缩进 */
    .prose.prose-base,
    .prose {
        padding-left: 12px !important;
        padding-right: 12px !important;
        padding-inline-start: 12px !important;
        padding-inline-end: 12px !important;
    }
    
    /* 图片：使用负 margin 突破 prose padding，让图片完全显示 */
    .prose.prose-base img,
    .prose img,
    .prose :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
        margin-left: -12px !important;
        margin-right: -12px !important;
        margin-inline-start: -12px !important;
        margin-inline-end: -12px !important;
        width: calc(100% + 24px) !important;
        max-width: calc(100% + 24px) !important;
        display: block !important;
    }
    
    /* 超小屏幕（小于 480px）调整 padding，确保最小缩进 */
    @media (max-width: 479px) {
        .flex-1.px-3,
        .flex-1.px-4 {
            padding-left: 10px !important;
            padding-right: 10px !important;
        }
        
        .prose.prose-base,
        .prose {
            padding-left: 10px !important;
            padding-right: 10px !important;
            padding-inline-start: 10px !important;
            padding-inline-end: 10px !important;
        }
        
        /* 超小屏幕图片调整 */
        .prose.prose-base img,
        .prose img,
        .prose :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
            margin-left: -10px !important;
            margin-right: -10px !important;
            margin-inline-start: -10px !important;
            margin-inline-end: -10px !important;
            width: calc(100% + 20px) !important;
            max-width: calc(100% + 20px) !important;
        }
    }
    
    /* 3. 确保外层容器不会裁剪代码块和图片 */
    article.max-w-3xl,
    .flex-1,
    .content-card {
        overflow-x: visible !important;
    }
    
    /* 确保 prose 容器不会裁剪图片 */
    .prose.prose-base,
    .prose {
        overflow-x: visible !important;
    }
    
    /* 4. 代码块：使用负 margin 突破父容器 padding，延伸到屏幕边缘 */
    .prose.prose-base pre[class*="language-"],
    .prose pre[class*="language-"],
    .prose code[class*="language-"] + pre,
    .prose pre:not(.not-prose, .not-prose *),
    .prose :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
        /* 突破 .prose 的 16px padding 和外层容器的 8px padding，总共 -24px */
        margin-left: -24px !important;
        margin-right: -24px !important;
        margin-inline-start: -24px !important;
        margin-inline-end: -24px !important;
        
        /* 代码块宽度：100% + 48px（左右各 24px 的负 margin） */
        width: min(calc(100% + 48px), 100vw) !important;
        max-width: min(calc(100% + 48px), 100vw) !important;
        min-width: 0 !important;
        
        /* 代码块内部 padding，保持内容不贴边 */
        padding: 0.75rem 1rem !important;
        
        /* 确保代码块可以水平滚动 */
        overflow-x: auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        
        /* 确保box-sizing正确 */
        box-sizing: border-box !important;
    }
    
    /* 5. 代码块内部 code 元素：允许内容左右滑动 */
    .prose.prose-base pre code,
    .prose pre code,
    .prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
        display: block !important;
        width: auto !important;
        min-width: 100% !important;
        max-width: none !important;
        white-space: pre !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        box-sizing: border-box !important;
        /* 确保长代码可以水平滚动 */
        word-break: normal !important;
        overflow-wrap: normal !important;
    }
    
    /* 6. 引用块（blockquote）：与代码块保持一致的处理 */
    .prose.prose-base blockquote,
    .prose blockquote,
    .prose :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
        margin-left: -24px !important;
        margin-right: -24px !important;
        margin-inline-start: -24px !important;
        margin-inline-end: -24px !important;
        width: min(calc(100% + 48px), 100vw) !important;
        max-width: min(calc(100% + 48px), 100vw) !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
}

/* 桌面版：中等缩进 */
@media (min-width: 1025px) {
    .prose.prose-base pre[class*="language-"],
    .prose pre[class*="language-"],
    .prose code[class*="language-"] + pre,
    .prose pre:not(.not-prose, .not-prose *),
    .prose :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
        /* 添加左右margin实现缩进 */
        margin-left: 24px !important;
        margin-right: 24px !important;
        margin-inline-start: 24px !important;
        margin-inline-end: 24px !important;
        
        /* 计算宽度：100% - 48px margin */
        width: calc(100% - 48px) !important;
        max-width: calc(100% - 48px) !important;
        
        /* 正常padding */
        padding: 1rem 1.25rem !important;
        box-sizing: border-box !important;
    }
}

/* 通用代码块样式 - 最高优先级 */
.prose.prose-base pre,
.prose pre,
.prose :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)),
pre[class*="language-"] {
    display: block !important;
    max-height: 600px !important;
    overflow: auto !important;
    background-color: #000000 !important;
    border: 1px solid #333333 !important;
    border-radius: 0.5rem !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    /* 黑色背景需要浅色文字 */
    color: #ffffff !important;
}

/* 修复内部code元素 */
.prose.prose-base pre code,
.prose pre code,
.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *)),
pre[class*="language-"] code {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    white-space: pre !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    background: transparent !important;
    /* 确保文字颜色在黑色背景上可见 */
    color: #ffffff !important;
}

/* 如果还有问题，使用更激进的选择器 */
.prose * pre,
.prose * pre[class*="language-"],
.prose div pre,
.prose div pre[class*="language-"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* 极小屏幕优化 */
@media (max-width: 480px) {
    .prose.prose-base pre,
    .prose pre,
    .prose :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.875rem !important;
    }
}

/* 滚动条优化 */
.prose pre::-webkit-scrollbar {
    height: 6px;
}

.prose pre::-webkit-scrollbar-track {
    background: #f1f5f9;
}

.prose pre::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 0.5rem;
}

.prose pre::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* -------- 回到顶部按钮样式 -------- */
.back-to-top-btn {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 3rem;
    height: 3rem;
    background-color: #3b82f6;
    color: #ffffff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    z-index: 1000;
    opacity: 0;
    transform: translateY(20px);
}

.back-to-top-btn.show {
    display: flex;
    opacity: 1;
    transform: translateY(0);
}

.back-to-top-btn:hover {
    background-color: #2563eb;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    transform: translateY(-2px);
}

.back-to-top-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.1);
}

/* 移动端优化 */
@media (max-width: 768px) {
    .back-to-top-btn {
        bottom: 1.5rem;
        right: 1.5rem;
        width: 2.75rem;
        height: 2.75rem;
    }
}

/* -------- 评论卡片样式 -------- */
.comment-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    transition: all 0.2s ease;
}

.comment-card:hover {
    border-color: #d1d5db;
}

/* 暗色模式 */
.dark .comment-card {
    background: #1f2937;
    border-color: #374151;
}

.dark .comment-card:hover {
    border-color: #4b5563;
}

/* 移动端优化 */
@media (max-width: 768px) {
    .comment-card {
        padding: 0.875rem 1rem;
    }
}

/* -------- 内容区域卡片样式（与相关推荐一致） -------- */
.content-card {
    background: #ffffff;
    border: none;
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    transition: all 0.2s ease;
}

.dark .content-card {
    background: #1f2937;
}

/* 移动端优化 */
@media (max-width: 768px) {
    .content-card {
        padding: 0.875rem 1rem;
    }
}

/* -------- 相关内容推荐样式（更低调） -------- */
/* 相关推荐卡片：移除边框 */
.related-posts-card {
    border: none !important;
}

.related-posts-card:hover {
    border-color: transparent !important;
}

.dark .related-posts-card {
    border-color: transparent !important;
}

.dark .related-posts-card:hover {
    border-color: transparent !important;
}

.related-posts-container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.related-post-link {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid #f3f4f6;
    text-decoration: none;
    transition: all 0.2s ease;
}

.related-post-link:last-child {
    border-bottom: none;
}

.related-post-link:hover {
    background-color: #f9fafb;
    padding-left: 1.25rem;
}

/* 暗色模式 */
.dark .related-post-link {
    border-bottom-color: #374151;
}

.dark .related-post-link:hover {
    background-color: #1f2937;
}

/* 移动端优化 */
@media (max-width: 768px) {
    .related-post-link {
        padding: 0.75rem 0.875rem;
    }
    
    .related-post-link:hover {
        padding-left: 1rem;
    }
}

/* -------- 侧边栏固定容器 -------- */
.sidebar-sticky-container {
    position: sticky;
    top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* -------- 文章目录样式 -------- */
.article-toc {
    width: 100%;
    background: #ffffff;
    border: none;
    border-radius: 0.5rem;
    padding: 0;
    margin-bottom: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
}

.toc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
}

.toc-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
}

.toc-toggle {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: none;
    border: none;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    color: #6b7280;
    font-size: 0.75rem;
    transition: color 0.2s ease;
}

.toc-toggle:hover {
    color: #3b82f6;
}

.toc-toggle-icon {
    width: 0.875rem;
    height: 0.875rem;
    transition: transform 0.3s ease;
}

.article-toc.collapsed .toc-toggle-icon {
    transform: rotate(180deg);
}

.article-toc.collapsed .toc-nav {
    display: none;
}

.toc-nav {
    font-size: 0.8125rem;
    overflow: visible;
    flex: 1;
    padding: 0.5rem 0;
}

.toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.toc-item {
    margin-bottom: 0.25rem;
    line-height: 1.6;
    position: relative;
}

.toc-item.toc-level-1 {
    padding-left: 0;
    font-weight: 600;
}

.toc-item.toc-level-2 {
    padding-left: 0.75rem;
    font-weight: 500;
}

.toc-item.toc-level-3 {
    padding-left: 1.5rem;
    font-weight: 400;
}

.toc-item.toc-level-4 {
    padding-left: 2.25rem;
    font-weight: 400;
}

.toc-item.toc-level-5 {
    padding-left: 3rem;
    font-weight: 400;
}

.toc-item.toc-level-6 {
    padding-left: 3.75rem;
    font-weight: 400;
}

.toc-link {
    color: #6b7280;
    text-decoration: none;
    display: block;
    padding: 0.375rem 1rem;
    transition: all 0.2s ease;
    word-break: break-word;
    position: relative;
    border-left: 3px solid transparent;
}

.toc-link:hover {
    color: #3b82f6;
    background-color: #f3f4f6;
}

.toc-link.active {
    color: #3b82f6;
    font-weight: 600;
    background-color: #eff6ff;
    border-left-color: #3b82f6;
}

/* 暗色模式 */
.dark .article-toc {
    background: #1f2937;
    box-shadow: none;
}

.dark .toc-header {
    border-bottom-color: #374151;
}

.dark .toc-title {
    color: #f3f4f6;
}

.dark .toc-link {
    color: #9ca3af;
}

.dark .toc-link:hover {
    color: #60a5fa;
}

.dark .toc-link.active {
    color: #60a5fa;
}

/* 目录滚动条样式 */
.article-toc::-webkit-scrollbar {
    width: 4px;
}

.article-toc::-webkit-scrollbar-track {
    background: #f3f4f6;
    border-radius: 2px;
}

.article-toc::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 2px;
}

.article-toc::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

.dark .article-toc::-webkit-scrollbar-track {
    background: #374151;
}

.dark .article-toc::-webkit-scrollbar-thumb {
    background: #4b5563;
}

.dark .article-toc::-webkit-scrollbar-thumb:hover {
    background: #6b7280;
}

/* -------- 热门文章样式 -------- */
.hot-articles-card {
    width: 100%;
    background: #ffffff;
    border-radius: 0.5rem;
    padding: 0;
    margin-bottom: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
}

.hot-articles-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e5e7eb;
}

.hot-articles-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
}

.hot-articles-count {
    font-size: 0.75rem;
    color: #6b7280;
    font-weight: 500;
}

.hot-articles-list {
    list-style: none;
    padding: 0.75rem 1rem;
    margin: 0;
}

.hot-articles-item {
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

.hot-articles-item:last-child {
    margin-bottom: 0;
}

.hot-articles-link {
    display: block;
    padding: 0.5rem;
    border-radius: 0.375rem;
    color: #4b5563;
    text-decoration: none;
    transition: all 0.2s ease;
}

.hot-articles-link:hover {
    background-color: #f3f4f6;
    color: #3b82f6;
}

.hot-articles-text {
    font-size: 0.8125rem;
    line-height: 1.5;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 暗色模式 */
.dark .hot-articles-card {
    background: #1f2937;
    box-shadow: none;
}

.dark .hot-articles-header {
    border-bottom-color: #374151;
}

.dark .hot-articles-title {
    color: #f3f4f6;
}

.dark .hot-articles-count {
    color: #9ca3af;
}

.dark .hot-articles-link {
    color: #9ca3af;
}

.dark .hot-articles-link:hover {
    background-color: #374151;
    color: #60a5fa;
}