/* -------- 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 一致 */
}

/* -------- 顶部导航固定定位 -------- */
/* 手机端：导航栏固定顶部 */
@media (max-width: 1023px) {
    nav.bg-white,
    nav#main-nav {
        position: sticky !important;
        top: 0 !important;
        z-index: 50 !important;
        background-color: #ffffff !important;
        overflow: visible !important; /* 确保菜单可以溢出显示 */
    }
    
    /* 滚动时隐藏顶部区域（logo、搜索、登录等） */
    #nav-top-section.nav-scrolled-hidden {
        max-height: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        overflow: hidden !important;
        opacity: 0 !important;
        transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.3s ease !important;
    }
    
    /* 正常状态 */
    #nav-top-section {
        max-height: 200px !important;
        transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.3s ease !important;
    }
}

/* -------- 手机版导航横版滑动样式 -------- */
/* 导航滚动容器：手机端横向滚动，PC端正常显示 */
.navi-scroll-container {
    width: 100%;
    overflow: hidden;
}

/* PC端：导航正常显示 */
@media (min-width: 1024px) {
    .navi-scroll-container {
        overflow: visible;
    }
    
    #navbarResponsive {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 1.5rem !important;
        flex-wrap: wrap !important;
    }
}

/* 手机端：横向滚动导航 */
@media (max-width: 1023px) {
    .navi-scroll-container {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch; /* iOS 平滑滚动 */
        /* 隐藏滚动条但保持滚动功能 */
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE 10+ */
        /* 优化滚动体验 */
        scroll-behavior: smooth;
        /* 允许触摸滑动 */
        touch-action: pan-x;
    }
    
    .navi-scroll-container::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera */
    }
    
    /* 导航菜单容器：横向排列，不换行 */
    #navbarResponsive {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 0.5rem !important; /* 导航项之间的间距（减小） */
        padding: 0.5rem 0 !important;
        min-width: max-content; /* 确保内容不压缩 */
        width: max-content; /* 允许内容超出容器 */
    }
    
    /* 导航项：不换行，保持原有样式 */
    #navbarResponsive > a,
    #navbarResponsive > div {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        margin: 0 !important;
    }
    
    /* 导航链接样式优化 */
    #navbarResponsive a {
        padding: 0.375rem 0.75rem !important; /* 减小内边距 */
        border-radius: 0.5rem !important;
        transition: all 0.2s ease !important;
        display: inline-flex !important;
        align-items: center !important;
        font-size: 0.9375rem !important; /* 15px */
        text-decoration: none !important;
        color: #374151 !important;
    }
    
    /* 导航链接悬停和活动状态 */
    #navbarResponsive a:hover {
        background-color: #f3f4f6 !important;
        color: #3b82f6 !important;
    }
    
    /* 下拉菜单容器在手机端 */
    #navbarResponsive .relative.group,
    #navbarResponsive .relative {
        position: relative;
        flex-shrink: 0;
    }
    
    /* 下拉菜单项在手机端 */
    #navbarResponsive .absolute {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 50;
        margin-top: 0.25rem;
        min-width: 10rem;
    }
    
    /* 确保下拉菜单中的链接也是横向的 */
    #navbarResponsive .absolute a {
        display: block !important;
        width: 100%;
    }
}

/* -------- 顶部导航栏样式优化 -------- */
/* 确保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 form[name="head-search"] input[type="search"] {
        min-width: 0 !important; /* 允许flex收缩 */
    }
    
    /* 搜索按钮样式 */
    nav form[name="head-search"] button[type="submit"] {
        display: inline-flex !important;
        visibility: visible !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; /* 推送到右边 */
    }
}

/* -------- 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 {
    /* 与 PC 端一致：使用 fixed，相对于视口，不受导航和分类栏影响 */
    position: fixed !important;
    z-index: 999999 !important; /* 与 PC 端保持一致，始终在最上层 */
    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;
    overflow: visible !important;
    display: none !important; /* 默认隐藏，通过 :not(.hidden) 显示 */
    visibility: hidden !important;
    opacity: 0 !important;
    transform: translateY(-10px) scale(0.95) !important;
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s 0.15s !important;
    pointer-events: none !important;
    /* 具体的 left/top 由 JavaScript 在打开时根据头像按钮动态计算 */
}

#mobile-user-menu:not(.hidden) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s 0s !important;
    pointer-events: auto !important;
}

/* 移动端媒体查询中的规则会覆盖上面的基础规则 */

#mobile-user-menu.hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    transform: translateY(-10px) scale(0.95) !important;
    pointer-events: none !important;
}

/* -------- PC端用户菜单下拉样式 -------- */
#desktop-user-menu {
    position: fixed !important; /* 使用 fixed 定位，相对于视口，不受其他元素影响 */
    z-index: 999999 !important; /* 使用极高的 z-index 确保在最上层 */
    min-width: 10rem !important;
    max-width: 12rem !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;
    overflow: visible !important;
    visibility: hidden !important;
    opacity: 0 !important;
    transform: translateY(-10px) scale(0.95) !important;
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s 0.15s !important;
    pointer-events: none !important;
    /* 位置将通过 JavaScript 动态设置 */
}

#desktop-user-menu:not(.hidden) {
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s 0s !important;
    pointer-events: auto !important;
}

#desktop-user-menu.hidden {
    visibility: hidden !important;
    opacity: 0 !important;
    transform: translateY(-10px) scale(0.95) !important;
    pointer-events: none !important;
}

/* -------- PC端创作菜单下拉样式 -------- */
#create-menu {
    position: fixed !important; /* 使用 fixed 定位，相对于视口，不受其他元素影响 */
    z-index: 999999 !important; /* 使用极高的 z-index 确保在最上层 */
    min-width: 10rem !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;
    overflow: visible !important;
    display: none !important; /* 默认隐藏，通过 :not(.hidden) 显示 */
    visibility: hidden !important;
    opacity: 0 !important;
    transform: translateY(-10px) scale(0.95) !important;
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s 0.15s !important;
    pointer-events: none !important;
    /* 位置将通过 JavaScript 动态设置 */
}

#create-menu:not(.hidden) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s 0s !important;
    pointer-events: auto !important;
}

#create-menu.hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    transform: translateY(-10px) scale(0.95) !important;
    pointer-events: none !important;
}

/* 确保父容器不会裁剪菜单，并提高层级 */
#mobile-user-menu-toggle,
#desktop-user-menu-toggle,
#create-menu-toggle {
    position: relative !important;
}

/* 用户菜单和创作菜单的父容器：提高层级，确保菜单显示在上层 */
#mobile-user-menu-toggle + div.relative,
div.relative:has(#mobile-user-menu),
div.relative:has(#desktop-user-menu),
div.relative:has(#create-menu),
div.flex.lg\:hidden.items-center.gap-2 .relative:has(#mobile-user-menu) {
    position: relative !important;
    overflow: visible !important;
    z-index: 99998 !important; /* 高于导航栏和分类导航，但低于菜单本身 */
    isolation: isolate !important; /* 创建新的层叠上下文 */
}

/* 直接选择包含桌面用户菜单的父容器（更具体的选择器） */
div.relative:has(#desktop-user-menu),
.hidden.lg\\:flex.items-center.gap-4 .relative:has(#desktop-user-menu) {
    z-index: 99998 !important;
    position: relative !important;
    overflow: visible !important;
    isolation: isolate !important;
}

/* 确保顶部导航区域（包含用户菜单）的层级高于分类导航，并且不会裁剪菜单 */
#nav-top-section {
    position: relative !important;
    z-index: 100 !important; /* 高于分类导航，低于用户菜单容器 */
    overflow: visible !important; /* 确保菜单可以超出此区域显示 */
}

/* 确保导航栏本身允许菜单溢出 */
nav {
    overflow: visible !important;
}

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

nav > div > div.flex.items-center {
    overflow: visible !important;
    position: relative !important; /* 确保定位上下文正确 */
}

/* 确保包含桌面用户菜单的容器层级正确 */
.hidden.lg\\:flex.items-center.gap-4,
.hidden.lg\:flex.items-center.gap-4 {
    position: relative !important;
    z-index: 99997 !important; /* 高于导航栏，但低于用户菜单父容器 */
    overflow: visible !important;
}

/* 确保分类导航的 z-index 低于用户菜单容器和顶部区域，并且不会遮挡菜单 */
nav > div.max-w-7xl > div.pb-3 {
    position: relative !important;
    z-index: 0 !important; /* 设置为 0，确保低于用户菜单的 z-index */
    overflow: visible !important; /* 确保不会裁剪菜单 */
}

/* 覆盖之前的 .navi-scroll-container 定义，确保 z-index 正确 */
.navi-scroll-container {
    position: relative !important;
    z-index: 0 !important; /* 设置为 0，确保低于用户菜单的 z-index */
}

/* 强制分类导航内的所有元素都使用低 z-index，确保不会遮挡用户菜单 */
nav > div.max-w-7xl > div.pb-3 *,
nav > div.max-w-7xl > div.pb-3 > *,
.navi-scroll-container,
.navi-scroll-container *,
#navbarResponsive,
#navbarResponsive * {
    z-index: 0 !important; /* 强制设置为 0，而不是继承 */
    position: relative !important;
}

/* 特别处理分类导航内的下拉菜单，但确保它们仍然低于用户菜单 */
#navbarResponsive .absolute {
    z-index: 10 !important; /* 分类导航内的下拉菜单可以有自己的 z-index，但远低于用户菜单的 999999 */
}

/* 移动端特殊处理 */
@media (max-width: 1023px) {
    /* 移动端也使用 fixed 定位，与 PC 端一致，通过 JS 动态计算位置 */
    #mobile-user-menu {
        position: fixed !important; /* 使用 fixed，不受父容器影响，独立于导航栏 */
        z-index: 999999 !important; /* 与PC端保持一致，使用极高的值 */
        /* display 由基础样式和 .hidden 类控制，这里不需要重复设置 */
    }
    
    #mobile-user-menu:not(.hidden) {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
        pointer-events: auto !important;
    }
    
    #mobile-user-menu.hidden {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    /* 确保移动端用户菜单父容器也有正确的设置 */
    div.flex.lg\:hidden.items-center.gap-2 .relative:has(#mobile-user-menu),
    div.flex.lg\\:hidden.items-center.gap-2 .relative:has(#mobile-user-menu) {
        position: relative !important;
        overflow: visible !important;
        z-index: 99998 !important;
        isolation: isolate !important;
    }
    
    /* 确保移动端分类导航的 z-index 也很低 */
    nav > div.max-w-7xl > div.pb-3 {
        z-index: 0 !important;
    }
    
    .navi-scroll-container {
        z-index: 0 !important;
    }
    
    nav > div.max-w-7xl > div.pb-3 *,
    nav > div.max-w-7xl > div.pb-3 > *,
    .navi-scroll-container *,
    #navbarResponsive,
    #navbarResponsive * {
        z-index: 0 !important;
    }
    
    #navbarResponsive .absolute {
        z-index: 10 !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，给内容留出空间 */
    article.max-w-3xl,
    article.max-w-5xl {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-inline-start: 0 !important;
        padding-inline-end: 0 !important;
    }
    
    /* 内容卡片在移动端保持内边距 */
    .content-card {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        padding-inline-start: 1rem !important;
        padding-inline-end: 1rem !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.prose-base img,
    .prose img,
    .prose :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-inline-start: 0 !important;
        margin-inline-end: 0 !important;
        width: 100% !important;
        max-width: 100% !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: 0 !important;
            margin-right: 0 !important;
            margin-inline-start: 0 !important;
            margin-inline-end: 0 !important;
            width: 100% !important;
            max-width: 100% !important;
        }
    }
    
    /* 3. 外层容器：不再允许横向内容溢出整个页面，超出部分在子元素内部滚动 */
    article.max-w-3xl,
    article.max-w-5xl,
    .flex-1,
    .content-card {
        overflow-x: hidden !important;
    }
    
    /* 确保 prose 容器不会裁剪图片 */
    .prose.prose-base,
    .prose {
        overflow-x: visible !important;
    }
    
    /* 4. 代码块：保持与正文相同的左右缩进，只在内部滚动，避免破坏整体缩进 */
    .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-left: 0 !important;
        margin-right: 0 !important;
        margin-inline-start: 0 !important;
        margin-inline-end: 0 !important;

        width: 100% !important;
        max-width: 100% !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;
}

/* 代码块复制按钮 */
.code-copy-btn {
    position: absolute;
    top: 0.4rem;
    right: 0.5rem;
    padding: 0.15rem 0.45rem;
    font-size: 0.75rem;
    line-height: 1;
    border-radius: 9999px;
    background-color: rgba(15, 23, 42, 0.75);
    color: #e5e7eb;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    z-index: 10;
}

.code-copy-btn:hover {
    background-color: rgba(37, 99, 235, 0.9);
}

.code-copy-btn.copied {
    background-color: rgba(22, 163, 74, 0.9);
    color: #ecfdf5;
}

/* -------- 回到顶部按钮样式 -------- */
.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: flex;
    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: 1;
    transform: translateY(0);
}

.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;
}

/* 评论表单输入样式（去掉紫色边框，使用深灰色） */
.comment-card textarea,
.comment-card input[type="text"],
.comment-card input[type="email"],
.comment-card input[type="url"] {
    border-radius: 0.75rem;
    border: 1px solid #e5e7eb;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.comment-card textarea:focus,
.comment-card input[type="text"]:focus,
.comment-card input[type="email"]:focus,
.comment-card input[type="url"]:focus {
    outline: none;
    border-color: #6b7280; /* gray-500 */
    box-shadow: 0 0 0 1px rgba(107, 114, 128, 0.6);
}

/* 暗色模式 */
.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: 1.5rem 1.5rem;
    transition: all 0.2s ease;
}

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

/* 移动端优化 */
@media (max-width: 768px) {
    .content-card {
        padding: 1rem 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;
    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;
}

/* -------- 内容页标题下方元信息不换行 -------- */
/* 确保标签、用户名、发布时间、编辑等在一行显示 */
.content-card > div:first-child > div:first-child > div:last-child {
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
}

.content-card > div:first-child > div:first-child > div:last-child > * {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}

/* 如果内容太长，允许横向滚动 */
.content-card > div:first-child > div:first-child > div:last-child {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */
}

.content-card > div:first-child > div:first-child > div:last-child::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* 点赞按钮样式 */
.like-btn {
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
    display: inline-flex;
    align-items: center;
    transition: all 0.2s;
}

.like-btn:hover {
    transform: scale(1.1);
}

/* 已点赞：蓝色 */
.like-btn.liked .like-icon {
    color: #3b82f6; /* blue-500 */
}

/* 未点赞：灰色 */
.like-btn:not(.liked) .like-icon {
    color: #9ca3af; /* gray-400 */
}

.like-count-wrap {
    display: inline-flex;
    align-items: center;
}

/* 内容页左侧操作栏（点赞 / 评论） */
.post-action-bar {
    min-width: 3rem;
    position: sticky;
    top: 8rem; /* 往下偏一点，避免贴顶部 */
    align-self: flex-start;
}

.post-action-btn {
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
    background-color: #ffffff;
}

.post-action-btn:hover {
    transform: translateY(-1px);
}

/* 去掉默认紫色焦点样式，使用更深的灰色高亮 */
.post-action-btn:focus,
.post-action-btn:active,
.post-action-btn:focus-visible {
    outline: none;
    /* 保持与普通状态一致的阴影，只做轻微强化，不再添加灰色描边 */
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.12);
}

.post-action-badge {
    top: -4px;
    right: -4px;
    min-width: 22px;
    padding: 2px 6px;
    border-radius: 9999px;
    background-color: #e5e7eb;
    color: #4b5563;
    font-size: 11px;
    line-height: 1;
    text-align: center;
}

@media (max-width: 767px) {
    /* 移动端隐藏左侧操作栏，避免占用过多宽度 */
    .post-action-bar {
        display: none;
    }
}

/* 移动端底部操作栏样式 */
.mobile-bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9998;
    background-color: #ffffff;
    border-top: 1px solid #e5e7eb;
    box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1), 0 -2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    transform: translateY(0);
    opacity: 1;
}

.mobile-bottom-bar.hidden {
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
}

.mobile-bottom-bar-content {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    max-width: 100%;
    gap: 10px;
}

.mobile-bottom-bar-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4px;
    color: #6b7280;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.2s;
    flex-shrink: 0;
    min-width: 40px;
}

.mobile-bottom-bar-item:hover,
.mobile-bottom-bar-item:active {
    color: #3b82f6;
}

.mobile-bottom-bar-item img {
    display: block;
}

.mobile-bottom-bar-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background-color: #ef4444;
    color: #ffffff;
    font-size: 10px;
    line-height: 18px;
    text-align: center;
    font-weight: 600;
}

.mobile-bottom-bar-item.like-btn .like-icon {
    fill: currentColor;
    color: #9ca3af; /* 灰色，未点赞时更清晰 */
}

.mobile-bottom-bar-item.like-btn.liked .like-icon {
    fill: currentColor;
    color: #3b82f6;
}

/* 移动端评论输入框样式 */
.mobile-comment-input-wrapper {
    flex: 1;
    min-width: 0;
    max-width: none;
}

.mobile-comment-input {
    font-size: 14px;
    line-height: 1.5;
    transition: all 0.2s;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.mobile-comment-input:focus {
    background-color: #ffffff;
}

.mobile-comment-input[readonly] {
    cursor: pointer;
}

.mobile-comment-input[readonly]:active {
    background-color: #e5e7eb;
}

.mobile-comment-submit {
    transition: opacity 0.2s;
    flex-shrink: 0;
    z-index: 1;
    font-weight: 500;
}

.mobile-comment-submit:hover {
    opacity: 0.8;
}

.mobile-comment-form {
    width: 100%;
}

.mobile-comment-badge {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background-color: #ef4444;
    color: #ffffff;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
    font-weight: 600;
    pointer-events: none;
    z-index: 1;
    white-space: nowrap;
}

/* 移动端目录菜单样式 */
.mobile-toc-menu {
    position: fixed;
    bottom: 70px;
    left: 0;
    right: 0;
    max-height: 60vh;
    background-color: #ffffff;
    border-top: 1px solid #e5e7eb;
    box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1), 0 -2px 4px -1px rgba(0, 0, 0, 0.06);
    z-index: 9999;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.mobile-toc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #e5e7eb;
    background-color: #f9fafb;
    position: sticky;
    top: 0;
    z-index: 1;
}

.mobile-toc-nav {
    padding: 8px 0;
}

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

.mobile-toc-item {
    margin: 0;
    padding: 0;
}

.mobile-toc-link {
    display: block;
    padding: 10px 16px;
    color: #374151;
    text-decoration: none;
    font-size: 14px;
    line-height: 1.5;
    transition: background-color 0.2s, color 0.2s;
    border-left: 3px solid transparent;
}

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

.mobile-toc-level-1 .mobile-toc-link {
    padding-left: 16px;
    font-weight: 600;
}

.mobile-toc-level-2 .mobile-toc-link {
    padding-left: 24px;
    font-size: 13px;
}

.mobile-toc-level-3 .mobile-toc-link {
    padding-left: 32px;
    font-size: 13px;
    color: #6b7280;
}

.mobile-toc-level-4 .mobile-toc-link,
.mobile-toc-level-5 .mobile-toc-link,
.mobile-toc-level-6 .mobile-toc-link {
    padding-left: 40px;
    font-size: 12px;
    color: #9ca3af;
}

/* 手机端文章底部操作按钮样式 */
.mobile-post-actions {
    margin-top: 1.5rem;
    margin-bottom: 0;
}

.mobile-post-action-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    background-color: #f3f4f6;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    color: #374151;
    font-size: 0.875rem;
    font-weight: 500;
}

.mobile-post-action-btn:hover,
.mobile-post-action-btn:active {
    background-color: #e5e7eb;
}

.mobile-post-action-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.mobile-post-action-btn.like-btn .like-icon {
    fill: currentColor;
    color: #9ca3af;
}

.mobile-post-action-btn.like-btn.liked .like-icon {
    fill: currentColor;
    color: #3b82f6;
}

.mobile-post-action-btn.like-btn.liked {
    color: #3b82f6;
}

.mobile-post-action-btn.like-btn.liked .like-num {
    color: #3b82f6;
}

.mobile-post-action-btn.share-btn svg {
    stroke: currentColor;
    color: #6b7280;
}

.mobile-post-action-btn.share-btn:hover svg,
.mobile-post-action-btn.share-btn:active svg {
    color: #3b82f6;
}

/* 微语弹窗图片切换按钮 */
#twitter-modal-img-prev,
#twitter-modal-img-next {
    transition: all 0.2s;
}

#twitter-modal-img-prev:hover,
#twitter-modal-img-next:hover {
    background: #f3f4f6 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
}

#twitter-modal-img-prev:active,
#twitter-modal-img-next:active {
    transform: translateY(-50%) scale(0.95) !important;
}

#twitter-modal-img-indicator {
    flex-wrap: wrap;
    max-width: 80%;
    justify-content: center;
}

#twitter-modal-img-indicator span {
    transition: background 0.2s;
}

#twitter-modal-img-indicator span:hover {
    background: rgba(59, 130, 246, 0.7) !important;
}

/* 微语弹窗响应式布局 */
@media (max-width: 768px) {
    #twitter-modal-body {
        flex-direction: column !important;
        gap: 16px !important;
        align-items: flex-start !important;
    }
    
    #twitter-modal-img-wrap {
        width: 100% !important;
        min-width: auto !important;
    }
    
    #twitter-modal-img {
        width: 100% !important;
    }
    
    #twitter-modal-img-prev {
        left: 8px !important;
    }
    
    #twitter-modal-img-next {
        right: 8px !important;
    }
    
    #twitter-modal {
        padding: 0.25rem !important;
    }
    
    #twitter-modal > div {
        border-radius: 8px !important;
        max-height: 95vh !important;
    }
}