/**
 * ESP 响应式样式 - 完整整合版
 * 
 * 包含所有响应式断点：
 * - 1024px 以下：平板
 * - 768px 以下：手机
 * - 480px 以下：小屏手机
 * 
 * @package ESP
 * @version 2.1.2
 * @since 2026-01-03
 */

/* ==========================================================================
   移动端滚动修复 - 全局
   ========================================================================== */

/* 确保内容区域可以垂直滚动 */
.home_row,
.module-sliders,
.module-html,
.content-area,
.site-content,
#primary,
.html-box,
.content-container,
.flickity-enabled,
.flickity-viewport,
.slider-1,
.slider-in,
.post-list,
.post-item,
.circle-topic-item,
.topic-content,
.flow-row-card,
.list-flow {
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch !important;
}

/* ==========================================================================
   平板断点 (1024px 以下)
   ========================================================================== */
@media screen and (max-width: 1024px) {
    /* 侧边栏宽度调整 */
    .sidebar-container {
        width: 220px !important;
    }
    
    /* 内容区域自适应 */
    .site-content,
    .content-area,
    #primary,
    #primary-home {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .list-flow .right {
        width: calc(100% - 100px) !important;
    }
}

/* ==========================================================================
   手机断点 (768px 以下)
   ========================================================================== */
@media screen and (max-width: 768px) {
    
    /* ==========================================================================
       0. 全局基础样式
       ========================================================================== */
    
    /* 统一背景色 */
    body,
    html,
    #page,
    .site,
    .site-content,
    .b2-color,
    .search-page,
    .login-page,
    .page-template,
    .archive,
    .single,
    .error404,
    .category,
    .tag,
    .author,
    #primary,
    #content,
    .content-area,
    main.site-main {
        background-color: var(--esp-bg-dark, #343434) !important;
    }
    
    /* 确保主内容区域可见 */
    .b2-content,
    #primary-home,
    .content-area,
    .home_row,
    .home-row-left,
    .html-box,
    .custom-wrapper,
    .content-container,
    .c-content,
    .tab-content-container,
    .tab-content.active,
    #last-container,
    .list-flow {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* 页面内容偏移 - 为固定顶栏腾出空间 */
    body {
        padding-top: 50px !important;
        padding-bottom: 60px !important;
        /* iOS Safari 地址栏变化时防止重排 */
        -webkit-overflow-scrolling: touch !important;
        overflow-x: hidden !important;
    }
    
    /* 防止 iOS Safari 底部菜单随地址栏移动 */
    html {
        height: 100% !important;
        overflow-x: hidden !important;
    }
    
    /* ========================================
       关键修复：确保内容区域支持触摸滑动
       强制所有内容区域可以垂直滑动
       ======================================== */
    html, body, #page, .site, .site-content, .b2-content,
    #primary-home, .content-area, .home_row, .home-row-left,
    .html-box, .custom-wrapper, .content-container, .c-content,
    .tab-content-container, .tab-content, #last-container,
    .list-flow, .list-flow *, .flow-row-card, .flow-row-card *,
    .topic-link, .toolbar, .i-laud, .i-share, .pic-grid,
    .left, .right, .avatar-wrap, .user-line, .article-title,
    .article-text, .cover-wrap, .nick-wrap, .more-menu {
        touch-action: pan-y !important;
        -webkit-user-drag: none !important;
        -webkit-touch-callout: none !important;
    }
    
    /* 确保没有元素阻止指针事件传递到滚动容器 */
    .list-flow,
    .list-flow.flow-row-card,
    .list-flow .left,
    .list-flow .right,
    .list-flow .topic-link,
    .list-flow .toolbar,
    .list-flow .pic-grid,
    .list-flow .cover-wrap,
    #last-container {
        pointer-events: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* 主内容区 */
    #page.site {
        padding-top: 0 !important;
        min-height: 100vh !important;
    }

    .site-content {
        margin-top: 0 !important;
    }
    
    /* ==========================================================================
       1. 顶部导航栏 - 居中 Logo
       ========================================================================== */
    
    /* 隐藏原有的侧边栏 */
    .sidebar-container {
        position: fixed !important;
        left: -300px !important;
        top: 0 !important;
        width: 280px !important;
        height: 100vh !important;
        z-index: 1100 !important;
        transition: left 0.3s ease !important;
        display: block !important;
        overflow-y: auto !important;
    }
    
    .sidebar-container.mobile-open {
        left: 0 !important;
    }
    
    /* 遮罩层 */
    .mobile-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1099;
    }
    
    .mobile-overlay.show {
        display: block;
    }
    
    /* 顶部栏重新布局 */
    .site-header,
    .site-header-in,
    .header-banner {
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        height: 50px !important;
        min-height: 50px !important;
        max-height: 50px !important;
        z-index: 1000;
        background: #343434 !important;
        overflow: visible !important;
    }
    
    .site-header .mg-b {
        margin-bottom: 0 !important;
    }

    .header-banner-content {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 50px !important;
        padding: 0 15px !important;
        margin: 0 !important;
        position: relative;
        width: 100% !important;
    }

    .header-banner-content > div {
        margin: 0 !important;
    }
    
    /* 左侧区域 */
    .header-banner-left {
        position: absolute !important;
        left: 15px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        display: flex !important;
        align-items: center !important;
        background: transparent !important;
    }
    
    /* 隐藏顶部汉堡菜单按钮 - 使用底部菜单代替 */
    .mobile-menu-toggle,
    #esp-mobile-menu-toggle,
    .header-banner-left .toggle-vertical-menu-button,
    .toggle-vertical-menu-button {
        display: none !important;
    }
    
    /* Logo 居中显示 */
    .social-top .header-logo,
    .social-top .header-banner-left .header-logo,
    .header-banner-left .header-logo,
    .header-logo {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
        width: auto !important;
        z-index: 1001 !important;
    }
    
    .header-logo .logo,
    .header-logo .logo h1,
    .header-logo .logo a,
    .header-logo .site-title {
        font-size: 18px !important;
        font-weight: bold !important;
        color: #fff !important;
        text-align: center !important;
        white-space: nowrap !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.2 !important;
    }

    .header-logo img {
        max-height: 30px !important;
        width: auto !important;
    }
    
    /* 隐藏其他头部元素 */
    .header-banner-right,
    .top-search,
    .header-user,
    .user-tools,
    .top-user-box,
    .login-button,
    .mobile-show.top-style-menu,
    #mobile-menu-button,
    .change-theme {
        display: none !important;
    }

    /* ==========================================================================
       2. 底部菜单栏 - 5个项目一横排（防止 iOS Safari 地址栏导致浮动）
       ========================================================================== */
    
    /* 禁用原生 mobile.css 的过渡动画 - 这是导致浮动的根本原因 */
    .mobile-footer-menu,
    .mobile-footer-menu.footer-fixed,
    .mobile-footer-menu.footer-down,
    #mobile-footer-menu {
        transition: none !important;
        -webkit-transition: none !important;
        transform: none !important;
        -webkit-transform: none !important;
    }
    
    .mobile-footer-menu.esp-footer-menu,
    .mobile-footer-menu.esp-footer-menu.footer-fixed,
    .mobile-footer-menu.esp-footer-menu.footer-down,
    #mobile-footer-menu.esp-footer-menu {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 50px !important;
        min-height: 50px !important;
        max-height: 50px !important;
        background: #000 !important;
        box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.1) !important;
        z-index: 99999 !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-around !important;
        align-items: center !important;
        padding: 0 !important;
        margin: 0 !important;
        /* 完全禁用过渡动画 */
        transition: none !important;
        -webkit-transition: none !important;
        /* 强制不变形 */
        transform: none !important;
        -webkit-transform: none !important;
        /* 防止被其他元素影响 */
        contain: layout style !important;
    }
    
    /* iOS 安全区域适配 */
    @supports (padding-bottom: env(safe-area-inset-bottom)) {
        .mobile-footer-menu.esp-footer-menu,
        .mobile-footer-menu.esp-footer-menu.footer-fixed,
        .mobile-footer-menu.esp-footer-menu.footer-down,
        #mobile-footer-menu.esp-footer-menu {
            height: calc(50px + env(safe-area-inset-bottom)) !important;
            max-height: calc(50px + env(safe-area-inset-bottom)) !important;
            padding-bottom: env(safe-area-inset-bottom) !important;
            /* 再次确保禁用 transform */
            transform: none !important;
            -webkit-transform: none !important;
        }
    }
    
    .mobile-footer-menu.esp-footer-menu > a {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 1 !important;
        text-decoration: none !important;
        color: #666 !important;
        padding: 0 !important;
        position: relative !important;
    }
    
    .mobile-footer-menu.esp-footer-menu > a span {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 24px !important;
    }
    
    .mobile-footer-menu.esp-footer-menu > a span i {
        font-size: 22px !important;
        line-height: 1 !important;
        color: #666 !important;
    }
    
    .mobile-footer-menu.esp-footer-menu > a b {
        font-size: 11px !important;
        font-weight: normal !important;
        margin-top: 4px !important;
        color: #666 !important;
        display: block !important;
    }
    
    .mobile-footer-menu.esp-footer-menu > a:active,
    .mobile-footer-menu.esp-footer-menu > a:hover {
        color: var(--main-color, #ff9800) !important;
    }
    
    .mobile-footer-menu.esp-footer-menu > a:active span i,
    .mobile-footer-menu.esp-footer-menu > a:hover span i,
    .mobile-footer-menu.esp-footer-menu > a:active b,
    .mobile-footer-menu.esp-footer-menu > a:hover b {
        color: var(--main-color, #ff9800) !important;
    }
    
    /* 底部菜单当前页面激活状态 */
    .mobile-footer-menu.esp-footer-menu > a.esp-menu-active {
        color: #e94632 !important;
    }
    
    .mobile-footer-menu.esp-footer-menu > a.esp-menu-active span i {
        color: #e94632 !important;
    }
    
    .mobile-footer-menu.esp-footer-menu > a.esp-menu-active b {
        color: #e94632 !important;
    }
    
    .mobile-footer-menu.esp-footer-menu .footer-new-msg {
        position: absolute !important;
        top: -2px !important;
        right: 50% !important;
        transform: translateX(12px) !important;
        min-width: 8px !important;
        height: 8px !important;
        background: #ff4444 !important;
        border-radius: 50% !important;
        font-size: 0 !important;
    }

    /* ==========================================================================
       3. 移动端全屏居中菜单面板
       ========================================================================== */
    
    #mobile-menu.esp-mobile-menu {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(0, 0, 0, 0.92) !important;
        z-index: 999999 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        transform: translateY(-100%) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: all 0.3s ease !important;
        overflow-y: auto !important;
    }
    
    #mobile-menu.esp-mobile-menu.show-menu-box {
        transform: translateY(0) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    #mobile-menu.esp-mobile-menu .esp-menu-header {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        padding: 15px !important;
        z-index: 10 !important;
    }
    
    #mobile-menu.esp-mobile-menu .esp-menu-close {
        position: absolute !important;
        top: 15px !important;
        right: 15px !important;
        width: 44px !important;
        height: 44px !important;
        font-size: 28px !important;
        color: #fff !important;
        background: rgba(255, 255, 255, 0.15) !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        z-index: 100 !important;
        line-height: 1 !important;
        transition: background 0.2s !important;
    }
    
    #mobile-menu.esp-mobile-menu .esp-menu-close:active {
        background: rgba(255, 255, 255, 0.25) !important;
    }
    
    #mobile-menu.esp-mobile-menu .esp-menu-content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 20px !important;
        margin: 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    #mobile-menu.esp-mobile-menu .esp-menu-list {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    
    #mobile-menu.esp-mobile-menu .esp-menu-list > li {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }
    
    #mobile-menu.esp-mobile-menu .esp-menu-list > li > a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 22px 24px !important;
        color: #fff !important;
        font-size: 24px !important;
        font-weight: 500 !important;
        text-decoration: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        transition: all 0.2s ease !important;
        width: 100% !important;
        text-align: center !important;
    }
    
    #mobile-menu.esp-mobile-menu .esp-menu-list > li > a:active {
        background: rgba(255, 255, 255, 0.1) !important;
        color: var(--main-color, #ff9800) !important;
    }
    
    #mobile-menu.esp-mobile-menu .esp-menu-list > li > a i {
        width: auto !important;
        font-size: 24px !important;
        margin-right: 12px !important;
        text-align: center !important;
        color: rgba(255, 255, 255, 0.85) !important;
        flex-shrink: 0 !important;
    }
    
    #mobile-menu.esp-mobile-menu .esp-menu-list > li > a span {
        flex: none !important;
        text-align: center !important;
    }
    
    .esp-menu-overlay {
        display: none !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 999998 !important;
    }
    
    #mobile-menu.esp-mobile-menu.show-menu-box ~ .esp-menu-overlay {
        display: block !important;
    }

    /* ==========================================================================
       4. 轮播图 - 100% 宽度
       ========================================================================== */
    
    .home_row_0,
    .module-sliders {
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }
    
    .slider-1 {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 0 !important;
        overflow: hidden !important;
    }
    
    .slider-1 .slider-1-carousel,
    .slider-1-carousel {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 0 !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
    
    .slider-in.slider-info {
        padding-top: 56.25% !important;
        height: 0 !important;
        border-radius: 0 !important;
        overflow: hidden !important;
    }
    
    .slider-1 .flickity-viewport {
        overflow: hidden !important;
        width: 100% !important;
    }
    
    .slider-1 .flickity-slider {
        width: 100% !important;
    }
    
    .slider-1 .slider-img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 0 !important;
    }
    
    /* 轮播图信息框 */
    .slider-info-box,
    .slider-1 .slider-info-box,
    .slider-1 .slider-in.slider-info .slider-info-box,
    .slider-info .slider-info-box {
        display: flex !important;
        position: absolute !important;
        border-radius: 0 !important;
        padding: 0 15px 12px 15px !important;
        background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.35) 70%, transparent 100%) !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        align-items: flex-start !important;
        text-align: left !important;
        box-sizing: border-box !important;
        z-index: 1 !important;
    }
    
    .slider-1 .slider-info-box::before,
    .slider-1 .slider-info-box::after,
    .slider-info .slider-info-box::before,
    .slider-info .slider-info-box::after,
    .slider-info::after {
        display: none !important;
        content: none !important;
    }
    
    .slider-in h2,
    .slider-info-box h2,
    .slider-1 .slider-in h2,
    .slider-1 .slider-info-box h2,
    .slider-info .slider-info-box h2 {
        position: relative !important;
        z-index: 1 !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
        margin: 0 0 4px 0 !important;
        padding: 0 !important;
        color: #fff !important;
        text-shadow: 0 1px 3px rgba(0,0,0,0.8) !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        width: auto !important;
        max-width: 100% !important;
        height: auto !important;
        text-align: left !important;
        display: inline-block !important;
        background: none !important;
    }
    
    .slider-user,
    .slider-info-box .slider-user,
    .slider-1 .slider-info-box .slider-user {
        display: block !important;
        position: relative !important;
        z-index: 1 !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        background: none !important;
    }
    
    .slider-info-box .slider-user img,
    .slider-info-box .slider-user picture,
    .slider-info-box .slider-user > span {
        display: none !important;
    }
    
    .slider-info-box .slider-user p,
    .slider-1 .slider-info-box .slider-user p {
        display: block !important;
        font-size: 12px !important;
        font-weight: 400 !important;
        line-height: 1.4 !important;
        color: rgba(255,255,255,0.85) !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        text-shadow: 0 1px 2px rgba(0,0,0,0.6) !important;
        text-align: left !important;
        width: 100% !important;
    }
    
    .slider-1 .flickity-page-dots {
        bottom: 8px !important;
        z-index: 2 !important;
    }
    
    .slider-1 .flickity-page-dots .dot {
        width: 6px !important;
        height: 6px !important;
        margin: 0 4px !important;
        background: rgba(255,255,255,0.5) !important;
    }
    
    .slider-1 .flickity-page-dots .dot.is-selected {
        background: #fff !important;
    }
    
    .wrapper {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* ==========================================================================
       5. Tab 文字菜单
       ========================================================================== */
    
    .tabs {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        background: var(--esp-bg-dark, #343434) !important;
        padding: 0 15px;
        margin: 0 auto;
        border-bottom: none !important;
        font-size: 14px !important;
        scrollbar-width: none;
        min-height: 44px;
        width: auto !important;
        max-width: 100% !important;
    }
    
    .tabs::-webkit-scrollbar {
        display: none;
    }
    
    .tabs .tab-button {
        background-image: none !important;
        width: auto !important;
        height: auto !important;
        padding: 12px 15px !important;
        font-size: 14px !important;
        color: #666 !important;
        background: transparent !important;
        border: none !important;
        position: relative;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .tabs .tab-button::after {
        color: rgba(255,255,255,0.7) !important;
    }
    
    .tabs .tab-button.active::after,
    .tabs .tab-button:hover::after {
        color: #fff !important;
        font-weight: bold;
    }
    
    .tabs .tab-button.active {
        border-bottom: 2px solid var(--esp-primary, #e94632) !important;
    }
    
    .tabs .tab-button.latest::after { content: none; }
    .tabs .tab-button.follow::after { content: none; }
    .tabs .tab-button.question::after { content: none; }
    .tabs .tab-button.essence::after { content: none; }
    .tabs .tab-button.info::after { content: none; }

    /* ==========================================================================
       6. 内容卡片
       ========================================================================== */
    
    .content-container {
        width: 100% !important;
        background: var(--esp-bg-dark, #343434) !important;
        padding: 0 !important;
    }
    
    .c-content,
    .tab-content-container {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        background: var(--esp-bg-dark, #343434) !important;
    }
    
    .tab-content {
        width: 100% !important;
        margin-top: 0 !important;
        background: var(--esp-bg-dark, #343434) !important;
    }

    .tab-content.active {
        display: block !important;
        width: 100% !important;
    }

    #last-container,
    #follow-container,
    #ask-container,
    #essence-container,
    #info-container {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    
    .list-flow.flow-row-card {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        background: var(--esp-bg-darker, #3d3d3d) !important;
        border-radius: 8px !important;
        margin: 8px 10px !important;
        padding: 12px !important;
        box-shadow: none !important;
        border: none !important;
    }
    
    .list-flow.flow-row-card::after {
        display: none !important;
    }
    
    .list-flow .left {
        display: block !important;
        flex-shrink: 0 !important;
        margin-right: 10px !important;
        margin-bottom: 0 !important;
    }
    
    .list-flow .left .avatar-wrap {
        width: 36px !important;
        height: 36px !important;
        display: block !important;
    }
    
    .list-flow .left .avatar {
        width: 36px !important;
        height: 36px !important;
        border-radius: 50% !important;
    }
    
    .list-flow .right {
        flex: 1 !important;
        width: 0 !important;
        margin-left: 0 !important;
    }
    
    .user-line {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        margin-bottom: 8px !important;
        flex-wrap: nowrap !important;
    }
    
    .user-line .nick-wrap,
    .user-line .nickname-wgt {
        display: inline-flex !important;
        align-items: center !important;
        flex-shrink: 0 !important;
    }
    
    .user-line .nickname {
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #fff !important;
        white-space: nowrap !important;
    }
    
    .user-line .post-time,
    .user-line .fc-grey-a {
        font-size: 12px !important;
        color: var(--esp-text-grey, #979797) !important;
        margin-left: 10px !important;
        white-space: nowrap !important;
    }
    
    .topic-link .article-title,
    .topic-link .fw-b {
        font-size: 15px !important;
        font-weight: bold !important;
        color: #fff !important;
        line-height: 1.4 !important;
        margin-bottom: 6px !important;
    }
    
    .topic-link .article-text,
    .topic-link .ellipsis_3 {
        font-size: 13px !important;
        color: var(--esp-text-muted, #ccc) !important;
        line-height: 1.5 !important;
        margin-bottom: 8px !important;
    }
    
    /* 图片网格 */
    .pic-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 4px !important;
        margin: 8px 0 !important;
        width: 100% !important;
    }
    
    .pic-grid .cover-wrap {
        width: 100% !important;
        height: 0 !important;
        padding-bottom: 100% !important;
        position: relative !important;
        border-radius: 4px !important;
        overflow: hidden !important;
    }
    
    .pic-grid .cover {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    
    .pic-grid .cover-wrap:only-child {
        grid-column: span 2 !important;
        padding-bottom: 56.25% !important;
    }
    
    .pic-grid .cover-wrap:nth-child(n+4) {
        display: none !important;
    }

    /* ==========================================================================
       7. 工具栏 - 点赞评论分享
       ========================================================================== */
    
    .toolbar {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin: 10px !important;
        padding-top: 8px !important;
        border-top: 1px solid var(--esp-border-light, rgba(151,151,151,0.2)) !important;
    }
    
    .toolbar .flex-center-v {
        display: flex !important;
        align-items: center !important;
    }
    
    .toolbar .i-laud {
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
    }
    
    .toolbar .i-laud a {
        display: inline-flex !important;
        align-items: center !important;
    }
    
    .toolbar .i-laud img {
        width: 22px !important;
        height: 22px !important;
        vertical-align: middle !important;
    }
    
    .toolbar .i-laud span {
        font-size: 13px !important;
        color: var(--esp-text-grey, #999) !important;
        margin-left: 2px !important;
        margin-right: 12px !important;
        line-height: 22px !important;
    }
    
    .toolbar .i-share {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }
    
    .toolbar .i-share a {
        display: inline-flex !important;
        align-items: center !important;
    }
    
    .toolbar .i-share img {
        width: 22px !important;
        height: 22px !important;
        vertical-align: middle !important;
    }
    
    /* 通用点赞评论样式 */
    .post-metas,
    .topic-footer,
    .post-bottom {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 30px !important;
        padding: 8px 15px !important;
    }
    
    .post-metas > a,
    .post-metas > span,
    .post-metas > div,
    .topic-footer > a,
    .topic-footer > span,
    .topic-footer > div,
    .post-bottom > a,
    .post-bottom > span {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        color: var(--esp-text-grey, #999) !important;
        font-size: 13px !important;
    }
    
    .post-metas > a i,
    .post-metas > span i,
    .topic-footer > a i,
    .topic-footer > span i,
    .post-bottom > a i,
    .post-bottom > span i {
        font-size: 16px !important;
        margin-right: 2px !important;
    }

    /* ==========================================================================
       8. 底部版权信息
       ========================================================================== */
    
    .footer-bottom-left {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 10px !important;
        background: var(--esp-bg-dark, #343434) !important;
        width: 100% !important;
        margin: 0 !important;
    }
    
    .footer-bottom-left .copyright {
        font-size: 11px !important;
        color: var(--esp-text-muted, #888) !important;
        margin-bottom: 2px !important;
        line-height: 1.2 !important;
        margin-top: 0 !important;
    }
    
    .footer-bottom-left .copyright a {
        color: var(--esp-text-muted, #888) !important;
        text-decoration: none !important;
    }
    
    .footer-bottom-left .beian {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        align-items: center !important;
        font-size: 10px !important;
        color: var(--esp-text-grey, #666) !important;
        line-height: 1.2 !important;
        gap: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .footer-bottom-left .beian a {
        color: var(--esp-text-grey, #666) !important;
        text-decoration: none !important;
        display: inline-flex !important;
        align-items: center !important;
        white-space: nowrap !important;
    }
    
    .footer-bottom-left .beian a img {
        width: 12px !important;
        height: 12px !important;
        margin-right: 2px !important;
    }
    
    .footer-bottom-left .beian .b2-dot {
        margin: 0 3px !important;
        color: var(--esp-text-grey, #555) !important;
    }
    
    .footer-bottom-left .beian .b2-dot:first-child {
        display: none !important;
    }
    
    .footer-bottom,
    .site-footer .footer-bottom,
    footer .footer-bottom {
        padding: 0 !important;
        margin: 0 !important;
    }
    
    footer#colophon,
    .site-footer {
        margin-bottom: 50px !important;
    }

    /* ==========================================================================
       9. 浮动按钮
       ========================================================================== */
    
    .float-right,
    .b2-float-btn,
    .go-top,
    .go-top-btn,
    .back-to-top,
    #b2-float-btn,
    .float-btns,
    .float-btn-wrap,
    .floating-buttons {
        bottom: 70px !important;
        right: 15px !important;
    }
    
    .floating-buttons {
        position: fixed !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        z-index: 1001 !important;
    }
    
    .floating-buttons .floating-button {
        width: 44px !important;
        height: 44px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .floating-buttons .floating-button.fab-publish {
        width: 48px !important;
        height: 48px !important;
    }
    .floating-buttons .floating-button.fab-top {
        width: 36px !important;
        height: 36px !important;
    }

    /* ==========================================================================
       10. 其他页面适配
       ========================================================================== */
    
    .custom-wrapper {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        background: #343434 !important;
        box-sizing: border-box !important;
    }
    
    .b2-content {
        display: block !important;
        width: 100% !important;
    }
    
    #primary-home {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .home_row {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .home-row-left {
        width: 100% !important;
    }
    
    .html-box {
        width: 100% !important;
        padding: 0 15px !important;
        box-sizing: border-box !important;
    }
    
    /* #last-container 两侧间距相同 */
    #last-container {
        padding: 0 15px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* 隐藏桌面端元素 */
    .widget-area,
    .pc-show {
        display: none !important;
    }
    
    /* 显示移动端元素 */
    .mobile-show:not(.circle-zz) {
        display: block !important;
    }
    
    .content-area {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ==========================================================================
   小屏手机 (480px 以下)
   ========================================================================== */
@media screen and (max-width: 480px) {
    .tabs .tab-button {
        padding: 8px 12px !important;
        font-size: 13px !important;
    }
    
    .topic-link .article-title {
        font-size: 15px !important;
    }
    
    .topic-link .article-text {
        font-size: 13px !important;
    }
    
    .list-flow .left .avatar-wrap,
    .list-flow .left .avatar {
        width: 32px !important;
        height: 32px !important;
    }
    
    .user-line .nickname {
        font-size: 13px !important;
    }
    
    .list-flow.flow-row-card {
        margin: 6px 8px !important;
        padding: 10px !important;
    }
    
    /* 底部菜单更紧凑 */
    .mobile-footer-menu.esp-footer-menu > a span i {
        font-size: 20px !important;
    }
    
    .mobile-footer-menu.esp-footer-menu > a b {
        font-size: 10px !important;
    }
}

/* ==========================================================================
   触摸优化
   ========================================================================== */
@media (hover: none) and (pointer: coarse) {
    .tabs .tab-button,
    .list-flow.flow-row-card,
    .mobile-bottom-nav .nav-item {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
        min-height: 44px;
        min-width: 44px;
    }
    
    .i-laud a,
    .i-share a {
        min-height: 44px;
    }
    
    .list-flow.flow-row-card:active {
        background: #4a4a4a !important;
    }
    
    .tab-button:active,
    .floating-button:active {
        opacity: 0.8;
        transform: scale(0.98);
    }
    
    /* 允许内容卡贴上触摸滑动 */
    .list-flow,
    .list-flow.flow-row-card,
    .list-flow *,
    #last-container,
    #follow-container,
    .tab-content,
    .tab-content-container,
    .content-container {
        touch-action: pan-y !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* ==========================================================================
   修复遮罩层阻止触摸滑动问题
   ========================================================================== */
@media screen and (max-width: 768px) {
    /* 确保 site-opt 遮罩在未显示时不阻止触摸事件 */
    .site-opt,
    .mobile-box + .site-opt {
        pointer-events: none !important;
    }
    
    .mobile-box.show-menu-box + .site-opt {
        pointer-events: auto !important;
    }
    
    /* 修复：所有 site-opt 遮罩层默认不阻止触摸，除非特别指定 */
    .site-opt {
        pointer-events: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
    
    /* 仅当菜单打开时才启用遮罩 */
    .mobile-box.show-menu-box + .site-opt,
    #mobile-menu.esp-mobile-menu.show-menu-box ~ .site-opt.esp-menu-overlay {
        pointer-events: auto !important;
        visibility: visible !important;
        opacity: 0.7 !important;
    }
    
    /* 确保 post-box-content 在未显示时不阻止触摸事件 */
    .post-box-content {
        pointer-events: none !important;
    }
    
    .post-box-content.show {
        pointer-events: auto !important;
    }
    
    /* 确保 publish-modal 在未显示时不阻止触摸 */
    .publish-modal {
        pointer-events: none !important;
    }
    
    .publish-modal[style*="display: block"],
    .publish-modal[style*="display:block"] {
        pointer-events: auto !important;
    }
}

/* ==========================================================================
   搜索框深色主题样式
   ========================================================================== */

/* 搜索弹窗背景 */
.modal.search-box.show-modal {
    background: rgba(0, 0, 0, 0.85) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}

/* 搜索框容器 - 深色主题 */
.search-box-content.modal-content {
    background: #1a1a1a !important;
    border: 1px solid #333 !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
    padding: 30px !important;
    max-width: 500px !important;
    width: 90% !important;
}

/* Logo区域 */
.search-box-content .login-logo {
    color: #e94632 !important;
    font-size: 24px !important;
    font-weight: bold !important;
    text-align: center !important;
    margin-bottom: 10px !important;
    letter-spacing: 2px !important;
}

/* 关闭按钮 */
.search-box-content .close-button {
    color: #666 !important;
    font-size: 28px !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    transition: all 0.2s ease !important;
    top: 15px !important;
    right: 15px !important;
}

.search-box-content .close-button:hover {
    background: #333 !important;
    color: #fff !important;
}

/* 搜索标题 */
.search-box-content .search-title {
    color: #888 !important;
    font-size: 14px !important;
    text-align: center !important;
    margin: 20px 0 25px 0 !important;
    font-weight: normal !important;
}

/* 搜索表单 */
.search-box-content .search-form-normal {
    background: transparent !important;
    display: block !important;
}

/* 搜索输入框 */
.search-box-content .search-input {
    width: 100% !important;
    padding: 16px 20px !important;
    font-size: 16px !important;
    background: #2a2a2a !important;
    border: 1px solid #3a3a3a !important;
    border-radius: 12px !important;
    color: #fff !important;
    outline: none !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
}

.search-box-content .search-input::placeholder {
    color: #666 !important;
}

.search-box-content .search-input:focus {
    border-color: #e94632 !important;
    box-shadow: 0 0 0 3px rgba(233, 70, 50, 0.15) !important;
}

/* 搜索按钮区域 */
.search-box-content .search-button {
    margin: 20px 0 0 0 !important;
    text-align: center !important;
}

.search-box-content .search-button button {
    width: 100% !important;
    padding: 14px 40px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    background: linear-gradient(135deg, #e94632 0%, #d63527 100%) !important;
    border: none !important;
    border-radius: 12px !important;
    color: #fff !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(233, 70, 50, 0.3) !important;
}

.search-box-content .search-button button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(233, 70, 50, 0.4) !important;
}

.search-box-content .search-button button:active {
    transform: translateY(0) !important;
}

/* 搜索类型选择 */
.search-box-content .header-search-select {
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
    margin-top: 20px !important;
    flex-wrap: wrap !important;
}

.search-box-content .header-search-select a {
    padding: 8px 16px !important;
    color: #888 !important;
    background: #2a2a2a !important;
    border-radius: 20px !important;
    font-size: 13px !important;
    transition: all 0.2s ease !important;
    border: 1px solid transparent !important;
}

.search-box-content .header-search-select a:hover,
.search-box-content .header-search-select a.select {
    background: #333 !important;
    color: #e94632 !important;
    border-color: #e94632 !important;
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
    .search-box-content.modal-content {
        width: calc(100% - 30px) !important;
        max-width: none !important;
        margin: 15px !important;
        padding: 25px 20px !important;
        border-radius: 12px !important;
    }
    
    .search-box-content .login-logo {
        font-size: 20px !important;
    }
    
    .search-box-content .search-title {
        font-size: 13px !important;
        margin: 15px 0 20px 0 !important;
    }
    
    .search-box-content .search-input {
        padding: 14px 16px !important;
        font-size: 15px !important;
        border-radius: 10px !important;
    }
    
    .search-box-content .search-button button {
        padding: 12px 30px !important;
        font-size: 15px !important;
        border-radius: 10px !important;
    }
    
    .search-box-content .close-button {
        top: 10px !important;
        right: 10px !important;
        font-size: 24px !important;
        width: 36px !important;
        height: 36px !important;
    }
    
    .search-box-content .header-search-select a {
        padding: 6px 12px !important;
        font-size: 12px !important;
    }
}

/* ==========================================================================
   文章页面样式优化 (Post Single Page)
   ========================================================================== */

/* PC端 post-style-3-title 样式 */
.post-style-3-title {
    display: block !important;
}

.post-style-3-title h1 {
    color: #fff !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
}

/* 移动端文章页样式 */
@media screen and (max-width: 768px) {
    /* post-style-3-title 显示并调整位置 */
    .post-style-3-title {
        display: block !important;
        position: absolute !important;
        bottom: 30px !important;
        left: 0 !important;
        right: 0 !important;
        padding: 0 15px !important;
        z-index: 10 !important;
    }
    
    .post-style-3-title h1 {
        font-size: 1.4rem !important;
        line-height: 1.4 !important;
        margin: 0 !important;
        text-align: center !important;
        color: #fff !important;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7) !important;
    }
    
    /* 文章 entry-header 中的 h1 居中 */
    .entry-header h1 {
        text-align: center !important;
        font-size: 1.3rem !important;
        line-height: 1.4 !important;
        padding: 0 10px !important;
    }
    
    /* 隐藏移动端的 user-title */
    .post-user-info .user-title {
        display: none !important;
    }
    
    /* 用户信息区域优化 */
    .post-user-info {
        padding: 10px 0 !important;
    }
    
    .post-user-info .post-meta-left {
        display: flex !important;
        align-items: center !important;
    }
    
    .post-user-info .post-user-name {
        margin-left: 8px !important;
    }
    
    .post-user-info .post-user-name b {
        font-size: 14px !important;
    }
    
    /* entry-content 内容区域 */
    .entry-content {
        padding: 15px !important;
    }
    
    .entry-content p {
        font-size: 15px !important;
        line-height: 1.7 !important;
        margin-bottom: 15px !important;
        color: #e5e5e5 !important;
    }
    
    /* 确保图片正确显示 */
    .entry-content img {
        max-width: 100% !important;
        height: auto !important;
        border-radius: 8px !important;
    }
}

/* 确保文章内容文字可见 */
.entry-content p,
.entry-content {
    color: #e5e5e5 !important;
}

/* 确保第一个段落（文章摘要/开头文字）突出显示 */
.entry-content > p:first-of-type {
    font-size: 16px !important;
    line-height: 1.8 !important;
    color: #e5e5e5 !important;
    padding: 15px !important;
    background: #2a2a2a !important;
    border-radius: 8px !important;
    margin-bottom: 20px !important;
    border-left: 3px solid #e94632 !important;
}

@media screen and (max-width: 768px) {
    .entry-content > p:first-of-type {
        font-size: 14px !important;
        padding: 12px !important;
        margin: 0 0 15px 0 !important;
    }
}

/* ==========================================================================
   文章内容居中修复 - 强化版
   ========================================================================== */

/* 移动端文章页完全重置 */
@media screen and (max-width: 768px) {
    /* 最外层容器 */
    body.single-post .b2-single-content.wrapper,
    body.single .b2-single-content.wrapper,
    .single .b2-single-content.wrapper {
        margin: 0 !important;
        padding: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* content-area 容器 */
    body.single-post #primary-home.content-area,
    body.single #primary-home.content-area,
    .single #primary-home.content-area,
    body.single-post .content-area,
    body.single .content-area,
    .single .content-area {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        display: block !important;
    }
    
    /* single-article 核心修复 - 使用多个选择器确保优先级 */
    body.single-post article.single-article,
    body.single-post article.single-article.b2-radius,
    body.single-post article.single-article.box,
    body.single-post article.single-article.b2-radius.box,
    body.single article.single-article,
    .single article.single-article,
    article.single-article.b2-radius.box {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: #343434 !important;
        float: none !important;
        display: block !important;
    }
    
    /* entry-header 居中 */
    body.single-post .entry-header,
    body.single .entry-header,
    .single .entry-header,
    .single-article .entry-header {
        margin: 0 !important;
        padding: 15px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* entry-content 居中 */
    body.single-post .entry-content,
    body.single .entry-content,
    .single .entry-content,
    .single-article .entry-content {
        margin: 0 !important;
        padding: 15px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* 标题居中 */
    body.single-post .entry-header h1,
    body.single .entry-header h1,
    .single .entry-header h1,
    .single-article .entry-header h1 {
        text-align: center !important;
        margin: 0 0 15px 0 !important;
        padding: 0 !important;
    }
    
    /* 重置 .box 类在文章页的样式 */
    body.single-post .box,
    body.single .box,
    .single .box {
        background: #343434 !important;
        box-shadow: none !important;
    }
}

/* ==========================================================================
   site-content 居中修复
   ========================================================================== */

@media screen and (max-width: 768px) {
    /* 修复 site-content 的 margin 偏移 */
    body.single-post .site-content,
    body.single-post #content.site-content,
    body.single .site-content,
    body.single #content.site-content,
    .single .site-content,
    .single #content.site-content {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ==========================================================================
   文章底部工具栏修复 - 点赞、收藏、分享
   ========================================================================== */

@media screen and (max-width: 768px) {
    /* 工具栏容器 */
    body.single-post .content-footer.post-content-footer,
    body.single .content-footer.post-content-footer,
    .single .content-footer.post-content-footer {
        background: #343434 !important;
        padding: 15px !important;
        border-top: 1px solid #3a3a3a !important;
        margin: 0 !important;
    }
    
    body.single-post .post-content-footer-in,
    body.single .post-content-footer-in {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
    }
    
    /* 按钮容器 */
    body.single-post .content-footer-poster,
    body.single .content-footer-poster {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 40px !important;
        width: 100% !important;
    }
    
    /* 统一按钮基础样式 */
    body.single-post .content-footer-poster button,
    body.single .content-footer-poster button {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 6px !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
        padding: 8px 15px !important;
        min-width: 50px !important;
        margin: 0 !important;
    }
    
    /* 移除 poster-span 的渐变背景 */
    body.single-post .content-footer-poster button.poster-span,
    body.single .content-footer-poster button.poster-span {
        background: transparent !important;
        color: #888 !important;
    }
    
    /* 按钮图标 - 使用伪元素 */
    body.single-post .content-footer-poster button::before,
    body.single .content-footer-poster button::before {
        font-family: 'b2font' !important;
        font-size: 22px !important;
        color: #888 !important;
        line-height: 1 !important;
        display: block !important;
    }
    
    /* 点赞图标 - 心形 */
    body.single-post .content-footer-poster #laud-ico::before,
    body.single .content-footer-poster #laud-ico::before {
        content: "\e988" !important;
    }
    
    /* 收藏图标 - 星星 */
    body.single-post .content-footer-poster #collect-ico::before,
    body.single .content-footer-poster #collect-ico::before {
        content: "\e9a1" !important;
    }
    
    /* 分享图标 - 分享 */
    body.single-post .content-footer-poster #repost-ico::before,
    body.single .content-footer-poster #repost-ico::before {
        content: "\e996" !important;
    }
    
    /* 评论图标 - 对话框 */
    body.single-post .content-footer-poster #comment-ico::before,
    body.single .content-footer-poster #comment-ico::before {
        content: "\e72e" !important;
    }
    
    /* 按钮文字样式 */
    body.single-post .content-footer-poster button b,
    body.single .content-footer-poster button b,
    body.single-post .content-footer-poster button .mobile-show,
    body.single .content-footer-poster button .mobile-show {
        font-size: 12px !important;
        color: #888 !important;
        font-weight: normal !important;
        display: block !important;
        line-height: 1 !important;
    }
    
    /* 激活/已选中状态 */
    body.single-post .content-footer-poster button.active::before,
    body.single .content-footer-poster button.active::before,
    body.single-post .content-footer-poster button.sc::before,
    body.single .content-footer-poster button.sc::before {
        color: #e94632 !important;
    }
    
    body.single-post .content-footer-poster button.active b,
    body.single .content-footer-poster button.active b,
    body.single-post .content-footer-poster button.sc b,
    body.single .content-footer-poster button.sc b {
        color: #e94632 !important;
    }
    
    /* 点击效果 */
    body.single-post .content-footer-poster button:active::before,
    body.single .content-footer-poster button:active::before {
        color: #e94632 !important;
        transform: scale(1.1) !important;
    }
    
    /* 隐藏评论按钮的文字（因为它没有） */
    body.single-post .content-footer-poster #comment-ico,
    body.single .content-footer-poster #comment-ico {
        display: flex !important;
    }
    
    /* 隐藏原有的图标元素 */
    body.single-post .content-footer-poster button i.b2font,
    body.single .content-footer-poster button i.b2font {
        display: none !important;
    }
}

/* ==========================================================================
   评论区域 respond 居中修复
   ========================================================================== */

@media screen and (max-width: 768px) {
    /* 评论区域容器 */
    body.single-post .comments-box,
    body.single .comments-box,
    .single .comments-box {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        background: #343434 !important;
    }
    
    body.single-post .comments-area,
    body.single .comments-area,
    .single .comments-area {
        margin: 0 !important;
        padding: 15px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        background: #343434 !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }
    
    /* respond 评论表单居中 */
    body.single-post #respond.respond,
    body.single #respond.respond,
    .single #respond.respond,
    #respond.respond {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* comment-form 居中 */
    body.single-post #comment-form,
    body.single #comment-form,
    .single #comment-form,
    #comment-form {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* com-form 评论输入框容器 */
    body.single-post .com-form,
    body.single .com-form,
    .single .com-form,
    .com-form {
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        background: #2a2a2a !important;
        border-radius: 8px !important;
        overflow: hidden !important;
    }
    
    /* 评论头像显示 */
    body.single-post .com-info,
    body.single .com-info,
    .single .com-info {
        display: flex !important;
        align-items: flex-start !important;
        margin-bottom: 10px !important;
    }
    
    body.single-post .com-info-avatar,
    body.single .com-info-avatar {
        width: 36px !important;
        height: 36px !important;
        border-radius: 50% !important;
        border: 2px solid #3a3a3a !important;
    }
    
    /* 输入框区域 */
    body.single-post .com-form-input,
    body.single .com-form-input {
        display: flex !important;
        gap: 10px !important;
        padding: 10px 12px !important;
        background: #2a2a2a !important;
        border-bottom: 1px solid #3a3a3a !important;
    }
    
    body.single-post .com-form-input input,
    body.single .com-form-input input {
        flex: 1 !important;
        background: #343434 !important;
        border: 1px solid #3a3a3a !important;
        border-radius: 6px !important;
        padding: 8px 12px !important;
        color: #fff !important;
        font-size: 14px !important;
    }
    
    body.single-post .com-form-input input::placeholder,
    body.single .com-form-input input::placeholder {
        color: #666 !important;
    }
    
    body.single-post .com-form-input input:focus,
    body.single .com-form-input input:focus {
        border-color: #e94632 !important;
        outline: none !important;
    }
    
    /* 评论文本区域 */
    body.single-post .com-form-textarea,
    body.single .com-form-textarea {
        padding: 0 !important;
    }
    
    body.single-post .com-form-textarea textarea,
    body.single .com-form-textarea textarea {
        width: 100% !important;
        min-height: 80px !important;
        background: #2a2a2a !important;
        border: none !important;
        padding: 12px !important;
        color: #fff !important;
        font-size: 14px !important;
        resize: none !important;
        box-sizing: border-box !important;
    }
    
    body.single-post .com-form-textarea textarea::placeholder,
    body.single .com-form-textarea textarea::placeholder {
        color: #666 !important;
    }
    
    /* 评论按钮区域 */
    body.single-post .com-form-button,
    body.single .com-form-button {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 10px 12px !important;
        background: #2a2a2a !important;
        border-top: 1px solid #3a3a3a !important;
    }
    
    body.single-post .com-form-button-l,
    body.single .com-form-button-l {
        display: flex !important;
        align-items: center !important;
        gap: 15px !important;
    }
    
    body.single-post .com-form-button-l span,
    body.single .com-form-button-l span {
        color: #888 !important;
        font-size: 20px !important;
        cursor: pointer !important;
    }
    
    /* 提交按钮 */
    body.single-post .com-form-button-r button,
    body.single .com-form-button-r button {
        background: #e94632 !important;
        color: #fff !important;
        border: none !important;
        padding: 8px 20px !important;
        border-radius: 20px !important;
        font-size: 14px !important;
        cursor: pointer !important;
    }
    
    /* 无评论提示 */
    body.single-post .no-comment,
    body.single .no-comment {
        text-align: center !important;
        color: #888 !important;
        padding: 20px !important;
        font-size: 14px !important;
    }
    
    /* 评论标题区域 */
    body.single-post .comments-title,
    body.single .comments-title {
        padding: 0 0 15px 0 !important;
        margin-bottom: 15px !important;
        border-bottom: 1px solid #3a3a3a !important;
    }
    
    /* ==========================================================================
       移动端登录弹窗修复
       ========================================================================== */
    
    /* 登录弹窗容器居中 */
    .modal.login-box {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* 登录弹窗半透明磨砂背景 */
    .login-box-content {
        background: rgba(40, 40, 40, 0.9) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
        margin: 0 auto !important;
        border-radius: 16px !important;
        width: calc(100% - 30px) !important;
        max-width: 350px !important;
    }
    
    .login-box-content .login-box-top {
        background: transparent !important;
    }
    
    /* 输入框图标修复 */
    .login-form-item input#userinput,
    .login-form-item input#passinput {
        padding-left: 45px !important;
        background-size: 18px 18px !important;
        background-position: 12px center !important;
    }
    
    /* 验证码输入框和图片各占50% */
    .login-form-item.login-check-input {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
    }
    
    .login-form-item.login-check-input input[name="checkCode"] {
        flex: 1 !important;
        width: 50% !important;
        min-width: 0 !important;
    }
    
    .login-form-item.login-check-input .check-code-img {
        flex: 1 !important;
        width: 50% !important;
        position: relative !important;
        margin-left: 0 !important;
    }
    
    .login-form-item.login-check-input .check-code-img img {
        width: 100% !important;
        max-width: 100px !important;
        height: 36px !important;
        object-fit: contain !important;
        border-radius: 6px !important;
    }
}