/* ==========================================================================
   1. 全局终极防溢出安全锁 (杜绝任何手机端左右晃动)
   ========================================================================== */
html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* ==========================================================================
   2. 全局基础功能按钮样式
   ========================================================================== */
.global-top-actions {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-right: 20px;
    vertical-align: middle;
}

.action-btn-circle {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #4a5568;
    font-size: 15px;
    cursor: pointer;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    transition: all 0.2s ease;
}
.action-btn-circle:hover {
    background: #f8fafc;
    color: #1a202c;
    border-color: #cbd5e1;
    transform: translateY(-1px);
}

@media (min-width: 992px) {
    .navbar-collapse {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end;
    }
}

/* ==========================================================================
   3. 完美修复版：全端无溢出置顶下滑通栏搜索框
   ========================================================================== */
div#navbarNav form.custom-blue-search {
    display: flex !important; 
    position: absolute !important;         /* 降级回absolute，但挂载点强制定位 */
    top: 100% !important;               /* 死死卡在白色导航栏的下边缘 */
    left: 0 !important;
    width: 100% !important;             /* 完美贴合父级100%宽度，绝不超出屏幕 */
    right: 0 !important;
    height: 0 !important;               /* 初始隐藏 */
    opacity: 0 !important;
    overflow: hidden !important;
    background: #ffffff !important;
    box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.08) !important;
    border-bottom: 1px solid #e2e8f0 !important;
    border-top: 1px solid #f1f5f9 !important;
    z-index: 9999 !important;           /* 确保层级置顶 */
    margin: 0 !important;
    padding: 0 !important;
    transition: height 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease !important;
}

/* 未显示时完全抹去，防止撑开DOM流 */
div#navbarNav form.custom-blue-search:not(.show-search) {
    display: none !important; 
}

/* 电脑端 (PC) 展开样式 */
@media (min-width: 992px) {
    div#navbarNav form.custom-blue-search.show-search {
        height: 110px !important;            
        opacity: 1 !important;
        padding-top: 24px !important;
    }
}

/* 手机端 (Mobile) 展开样式 */
@media (max-width: 991.98px) {
    div#navbarNav form.custom-blue-search.show-search {
        position: fixed !important;         /* 手机端激活状态采用纯净顶层fixed */
        top: 56px !important;               /* 对齐顶部白条下沿 */
        height: 90px !important;            
        opacity: 1 !important;
        padding-top: 24px !important;        
    }
    main.container {
    --bs-gutter-x: 0.3rem;
}

}

/* 中央限制容器 */
.search-panel-container {
    width: 100% !important;
    max-width: 1140px !important; 
    margin: 0 auto !important;
    padding: 0 20px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 25px !important;
    box-sizing: border-box !important;
}

/* 输入框整行排版样式 */
.search-input-row {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
}
.search-input-row .input-group {
    width: 100% !important;
    max-width: 550px !important; 
}
.search-input-row input {
    border-radius: 6px 0 0 6px !important;
    border: 1px solid #cbd5e1 !important;
    height: 42px !important;
    padding-left: 16px !important;
}
.search-input-row button[type="submit"] {
    border-radius: 0 6px 6px 0 !important;
    height: 42px !important;
    padding: 0 24px !important;
}



@keyframes fadeInPanelItems {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   4. 原手机端右侧抽屉样式安全回滚 (无溢出纯净版)
   ========================================================================== */
@media (max-width: 991.98px) {
    div#navbarNav form.custom-blue-search .search-hot-posts-box {
        display: none !important;
    }
main.container.py-5 {
    padding-top: 0.3rem !important;
    padding-bottom: 0.3rem !important;
}
    /* 右侧滑动抽屉 */
    .navbar-collapse {
        position: fixed !important;
        top: 0 !important;
        right: -280px !important; 
        width: 280px !important;
        height: 100vh !important;
        background-color: #f6f8fa !important;
        padding: 76px 14px 24px 14px !important; 
        transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
        transform: translateX(0) !important;
        z-index: 1045 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow-y: auto !important;
        overflow-x: hidden !important; /* 强制锁定抽屉自身内部的横向溢出 */
    }

    .navbar-collapse.show { transform: translateX(-280px) !important; }
    .navbar-nav .dropdown-menu { display: none !important; }

    .mobile-top-member {
        position: absolute !important;
        top: 20px !important;        
        left: 16px !important;
        height: 32px !important;      
        display: inline-flex !important;
        align-items: center !important; 
        gap: 6px !important;
        z-index: 1055 !important;
    }
    .mobile-top-member a { color: #4a5568 !important; font-size: 13px !important; font-weight: 600 !important; text-decoration: none !important; }
    .mobile-top-member .divider { color: #cbd5e1 !important; font-size: 12px !important; margin: 0 2px !important; }

    .mobile-top-actions {
        position: absolute !important;
        top: 20px !important;        
        right: 56px !important; 
        height: 32px !important;      
        z-index: 1055 !important;
        margin: 0 !important;
        display: inline-flex !important;
    }
    .mobile-top-actions .action-btn-circle { width: 32px !important; height: 32px !important; }

    .navbar-toggler[aria-expanded="true"] {
        position: fixed !important;   
        top: 20px !important;        
        right: 16px !important;       
        width: 32px !important;       
        height: 32px !important;      
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
        display: flex !important;
        align-items: center !important;   
        justify-content: center !important;
        z-index: 1060 !important;
        transform: rotate(90deg) !important;
    }
    .navbar-toggler[aria-expanded="true"] .bi-list::before { content: "\f659" !important; font-size: 20px !important; color: #4a5568 !important; }

    .mobile-card-container { background: #ffffff !important; border-radius: 12px !important; padding: 14px !important; margin-bottom: 14px !important; }
    .mobile-card-title { font-size: 14px !important; font-weight: 700 !important; color: #1a202c !important; padding-bottom: 8px !important; border-bottom: 1px solid #f1f5f9 !important; margin-bottom: 10px !important; }
    .mobile-grid-box { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; }
    .mobile-grid-item { flex: 0 0 calc(50% - 3px) !important; background-color: #f1f5f9 !important; color: #4a5568 !important; text-align: center !important; padding: 9px 2px !important; font-size: 12px !important; font-weight: 500 !important; border-radius: 8px !important; text-decoration: none !important; }
}

/* ==========================================================================
   5. 全端黑夜模式深色无损适配
   ========================================================================== */
body.theme-dark { background-color: #121212 !important; color: #e0e0e0 !important; }
body.theme-dark .navbar, 
body.theme-dark .mobile-card-container,
body.theme-dark .action-btn-circle, 
body.theme-dark div#navbarNav form.custom-blue-search { background-color: #1e1e1e !important; border-color: #333333 !important; color: #e0e0e0 !important; }
body.theme-dark div#navbarNav form.custom-blue-search input { background-color: #2d2d2d !important; color: #ffffff !important; border-color: #444444 !important; }
body.theme-dark .mobile-card-title, body.theme-dark .navbar-collapse > div a, body.theme-dark .mobile-top-member a { color: #ffffff !important; }
body.theme-dark .mobile-grid-item { background-color: #2d2d2d !important; color: #cccccc !important; }
body.theme-dark .navbar-collapse { background-color: #121212 !important; }
body.theme-dark .navbar-toggler[aria-expanded="true"] .bi-list::before { color: #ffffff !important; }
body.theme-dark .action-btn-circle:hover { background: #2d2d2d !important; color: #ffffff !important; }

body.theme-dark .hot-posts-title { color: #cbd5e1 !important; }
body.theme-dark .hot-post-title-text { color: #cbd5e1 !important; }
body.theme-dark .hot-post-card:hover .hot-post-title-text { color: var(--bs-primary, #3b82f6) !important; }
body.theme-dark .hot-post-thumb { background-color: #2d2d2d !important; }