/* 移动端切换按钮样式 */
.sidebar-toggle-btn {
    display: none; /* 默认隐藏 */
    background: none;
    border: none;
    padding: 5px;
    margin-right: 10px;
    cursor: pointer;
    transition: transform 0.3s ease;
}
        
.sidebar-toggle-btn.animate {
    transform: rotate(90deg);
}
.sidebar-toggle-btn svg {
    display: block; /* 修复可能的内联空白问题 */
}

/* 原始按钮在移动端隐藏 */
@media (max-width: 767px) {
    #originalToggleBtn {
        display: none;
    }
    .sidebar-toggle-btn {
        display: block; /* 在移动端显示 */
    }
}
         /* 确保原始按钮在桌面端显示 (如果之前被JS隐藏) */
@media (min-width: 768px) {
    #originalToggleBtn {
        display: flex; /* 或 block, inline-flex 等，取决于其原始display值 */
    }
    .sidebar-toggle-btn {
        display: none; /* 在桌面端隐藏 */
    }
}
.bar {
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
}


/* 分类侧边栏样式 - 移动端优化 */
.category-layout {
    display: flex;
    position: relative;
    min-height: calc(100vh - 120px);
}

.category-sidebar {
    position: fixed;
    left: 80px;
    top: 60px;
    bottom: 0;
    width: 200px;
    background: var(--section-bg);
    box-shadow: var(--card-shadow);
    z-index: 95;
    transition: transform 0.3s ease;
    z-index: 90;
    overflow-y: auto;
    padding: 15px 0;
}

.category-sidebar.collapsed {
    transform: translateX(0);
}

.category-sidebar .toggle-btn svg {
    transition: transform 0.3s ease;
}

.category-sidebar.collapsed .toggle-btn svg {
    transform: rotate(180deg);
}

.category-sidebar ul {
    list-style: none;
}

.category-sidebar li {
    padding: 12px 20px;
    cursor: pointer;
    transition: background 0.2s ease;
    font-size: 14px;
}

.category-sidebar li:hover {
    background: var(--hover-bg);
}

.category-sidebar li.active {
    background: var(--active-bg);
    color: var(--active-color);
    font-weight: 500;
    border-left: 3px solid var(--active-color);
}

/* 遮罩层 */
.sidebar-overlay {
    position: fixed;
    top: 54px;
    left: 0;
    right: 0;
    bottom: 60px;
    background: rgba(0,0,0,0.5);
    z-index: 80;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.category-sidebar.collapsed + .sidebar-overlay {
    opacity: 1;
    visibility: visible;
}

/* 内容区 */
.category-content {
    flex: 1;
    padding: 15px;
    margin-left: 200px; /* 为分类侧边栏留出空间 */
    background: var(--bg-color);
}


/* 移动端适配 - 悬浮侧边栏 */
@media (max-width: 767px) {
    .category-sidebar {
        left: 0;
        top: 0; /* 从顶部开始 */
        width: 250px; /* 或使用百分比，如 70% */
        height: 100vh; /* 占据全屏高度 */
        transform: translateX(-100%); /* 默认隐藏在左侧 */
        z-index: 100; /* 确保在最上层 */
    }

    .category-sidebar.collapsed {
        transform: translateX(0); /* 滑入屏幕 */
    }

    .category-content {
        margin-left: 0; /* 内容区不再有左边距 */
    }

    .sidebar-overlay {
        top: 0; /* 遮罩层覆盖全屏 */
        bottom: 0;
        z-index: 99; /* 在侧边栏之下，内容之上 */
    }

    /* .category-sidebar.collapsed + .sidebar-overlay 的显示逻辑保持不变 */
    .category-sidebar.collapsed + .sidebar-overlay {
        opacity: 1;
        visibility: visible;
    }
}

.view-more {
    display: block;
    text-align: center;
    margin-top: 20px;
    color: var(--active-color);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s ease;
}

.view-more:hover {
    color: var(--texts-color);
}

.error {
    color: var(--active-color);
    text-align: center;
    padding: 20px;
    background: var(--active-bg);
    border-radius: 8px;
    margin: 15px 0;
}