.toc-container {
    width: 100%;
}

.toc-container.toc-sticky {
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}

.toc-header {
    border-left: 4px solid #0057DA;
    padding-left: 16px;
    margin-bottom: 20px;
}

.toc-header h3.toc-title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin: 0;
    color: #0057DA;
}

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

.toc-link {
    display: block;
    font-size: 15px;
    line-height: 1.5;
    color: #333333;
    text-decoration: none;
    transition: all 0.3s ease;
    padding: 4px 0;
    
}

.toc-link:hover {
    color: #0057DA !important;
    background-color: #d9d9d94d;
}

.toc-link.active {
    color: #0057DA;
}

.toc-item.level-h3 .toc-link {
    padding-left: 16px;
    font-size: 14px;
}

.toc-item.level-h4 .toc-link {
    padding-left: 16px;
    font-size: 16px;
    font-weight: 500;
    border-radius: 6px;
}

@media (max-width: 1024px) {
    .toc-container,
    .toc-container.toc-sticky {
        position: relative;
        right: auto;
        top: auto;
        width: 100%;
        max-height: none;
        background: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        padding: 16px;
    }
    
    .toc-header {
        border-left: 4px solid #0057DA;
        padding-left: 16px;
        margin-bottom: 0;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .toc-header::after {
        content: '';
        width: 14px;
        height: 6px;
        background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDE4IDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTcuODExNSAxLjU2MTc3TDE3LjAzMDYgMi4xODY0Nkw5LjUzMDY1IDguMTg2NDZDOS40ODY2MyA4LjIyMTY3IDkuNDM5OTggOC4yNTI4OSA5LjM5MDY4IDguMjgwMjFDOS4zNDEzOCA4LjMwNzUzIDkuMjkwMTQgOC4zMzA1MyA5LjIzNjk2IDguMzQ5MThDOS4xODM3NyA4LjM2Nzg0IDkuMTI5NCA4LjM4MTkgOS4wNzM4NCA4LjM5MTM2QzkuMDE4MjcgOC40MDA4MiA4Ljk2MjMxIDguNDA1NTggOC45MDU5NSA4LjQwNTU4QzguODQ5NTkgOC40MDU1OCA4Ljc5MzYzIDguNDAwODIgOC43MzgwNyA4LjM5MTM2QzguNjgyNSA4LjM4MTkgOC42MjgxMyA4LjM2Nzg0IDguNTc0OTQgOC4zNDkxOEM4LjUyMTc2IDguMzMwNTMgOC40NzA1MSA4LjMwNzUzIDguNDIxMjIgOC4yODAyMUM4LjM3MTkyIDguMjUyODkgOC4zMjUyNyA4LjIyMTY3IDguMjgxMjYgOC4xODY0NkwwLjc4MTI1NCAyLjE4NjQ2TDAuMDAwMzc3MjIzIDEuNTYxNzdMMS4yNDk3NyAwTDIuMDMwNjQgMC42MjQ2OTVMOC45MDU5NSA2LjEyNDk0TDE1Ljc4MTMgMC42MjQ2OTVMMTY1NjIxIDBMMTcuODExNSAxLjU2MTc3WiIgZmlsbD0iIzIyMjIyMiIvPgo8L3N2Zz4K');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        transition: transform 0.3s ease;
    }
    
    .toc-header.collapsed::after {
        transform: rotate(-90deg);
    }
    
    .toc-list {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
        margin-top: 0;
    }
    
    .toc-list.expanded {
        max-height: 1000px;
        margin-top: 16px;
    }
    .toc-item.level-h4 .toc-link {
        font-size: 14px;
    }
}

@media (max-width: 768px) {
    .toc-header h3.toc-title {
        font-size: 12px;
    }
    .toc-header {
        padding-left: 10px;
        border-width: 2px;
    }
    .toc-item.level-h4 .toc-link {
        padding-left: 10px;
    }
}